在函数内部使用开关答案

【问题标题】：Using a switch inside of a function在函数内部使用开关
【发布时间】：2016-08-18 01:02:41
【问题描述】：

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

【问题讨论】：

你可能会完全摆脱 switch 而只使用 x.backgroundImage = "url('" + n + ".jpg')";
@JonSG OP 里面也有一些 .png
document.getElementsByClassName("banner") 返回节点数组，你应该这样做：document.getElementsByClassName("banner")[0];
switch (slideIndex) 而不是 n

标签： javascript function switch-statement

【解决方案1】：

它不起作用的原因是因为n 是一个数字，但您的 switch case 是字符串。只需删除案例周围的引号即可。

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 在 cmets 中提到的，document.getElementsByClassName("banner") 将返回一个包含类 banner 的所有元素的节点列表。这意味着您需要提取某个元素，可能是第一个：

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

【讨论】：

好像没有影响班级的背景图，是不是我设置的变量有问题？
我忘了调整不同的扩展，现在编辑
你也可以有一个文件名数组和数组索引。这会比 switch 更简洁，但仍然非常灵活。

【解决方案2】：

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

x 是一个具有“横幅”类的元素数组。您应该改用 id (document.getElementById())，但是如果您可以确保只有一个具有“横幅”类的元素，那么只需抓取第 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]}')`;
};

【讨论】：