使用功能內的開關

var slideIndex = 1; 
showDivs(slideIndex); 

function plusDivs(n) { 
    showDivs(slideIndex += n); 
} 

function showDivs(n){ 
    var i; 
    var x = document.getElementsByClassName("banner").style; 
    if (n > 4) {slideIndex = 1} 
    if (n < 1) {slideIndex = 4} 

    switch (n) { 
     case '1': x.backgroundImage = "url('1.jpg')"; 
      break; 
     case '2': x.backgroundImage = "url('2.png')"; 
      break; 
     case '3': x.backgroundImage = "url('3.jpeg')"; 
      break; 
     case '4': x.backgroundImage = "url('4.png')"; 
      break; 
    } 

    }

這是我的腳本。我想要做的事情是，當我按下一個按鈕時，它會添加1或從slideIndex中拿走1，並且根據當前位於哪個幻燈片索引，我想使用該開關，然後設置類的背景圖像「橫幅」對應的數字圖像。但這似乎並不奏效。它有什麼問題？使用功能內的開關

來源

2016-08-18 peter k

你可能會完全**擺脫**開關，只需使用** x.backgroundImage = 「URL（'」 + N + 「.jpg'）」; ** – JonSG

@JonSG OP有幾個.png – Derek

'document.getElementsByClassName（「banner」）'返回節點數組，你應該這樣做：'document.getElementsByClassName（「banner 「）[0]'; – CoderLim

它不起作用的原因是因爲n是一個數字，但您的開關案件是字符串。只要刪除你的案件引用。

function showDivs(n){ 
    // ... 

    switch (n) { 
     case 1: // ... 
     case 2: // ... 
     case 3: // ... 
     case 4: // ... 
    } 
}

由於您的圖像名稱對應的n值，你可以讓另一改進是直接使用n而不是通過switch打算：

function showDivs(n){ 

    // ... 

    var extension = n % 2 === 0 ? '.jpg' : '.png'; 
    x.backgroundImage = "url('" + n + extension +"')"; 
}

注：你有兩頭JPEG圖像具有不同的擴展名，您可以考慮將它們重命名爲一致的擴展名以簡化您的用例。否則，您可能想要堅持switch聲明。

正如在評論中提到通過CoderGLM，document.getElementsByClassName("banner")將返回所有元素的節點列表與類banner。這意味着你需要提取一定的元件，可能是第一個：

x = document.getElementsByClassName("banner")[0].style;

來源

2016-08-18 01:05:51 nem035

它似乎沒有影響類的背景圖像，我做了錯誤的變量設置？ –

我忘了調整不同的擴展名，現在編輯 – nem035

你也可以有一個數組的文件名和索引。這比「switch」更簡潔，但仍然非常靈活。 – qxz

var x = document.getElementsByClassName("banner").style;

x是與類「旗幟」元件的陣列。你應該使用id來代替（document.getElementById()），但是如果你可以確保只有一個元素的類爲'banner'，那麼就抓住第0個元素。

var x = document.getElementsByClassName("banner")[0].style;

一個更好的解決方案可能是

let slideIndex = 1; 

const plusDivs = (n) => { 
    slideIndex += n; 
    showDivs(slideIndex); 
}; 

const showDivs = (n) => { 
    let x = document.getElementsByClassName('banner')[0].style; 

    slideIndex = Math.min(4, Math.max(1, n)); // Clamp n between [1,4] 

    const images = ['1.jpg', '2.png', '3.jpeg', '4.png']; 
    x.backgroundImage = `url('${images[n]}')`; 
};

來源

2016-08-18 01:25:03 glitchyme

使用功能內的開關

回答

相關問題