javascript - 在函数内部使用开关

Question

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;
    }

  }   

这是我的脚本。我想要它做的是，当我按下一个按钮时，它会从 slideIndex 中加 1 或减去 1，并且根据它当前所在的幻灯片索引，我想使用开关，然后设置类的背景图像“banner”到对应编号的图片。但是，这似乎不起作用。有什么问题吗？

Answer 1

它不起作用的原因是因为 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;