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，并根据当前所在的幻灯片索引我想要使用该开关，然后设置该类的背景图像“横幅“到与数字对应的图像。但这似乎不起作用。这有什么问题？

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;

Answer 2

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

x是一个带有“banner”类的元素数组。你应该使用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]}')`;
};

使用功能内部的开关

2 个答案: