JavaScript:显示多种 T 恤颜色背面图像的函数

Question

我正在制作一个简单的网页，允许用户选择 T 恤及其颜色。我希望代码(如果可能)通过一个语句显示每种颜色 T 恤的背面图像，并在第二个语句中能够将其旋转回正面。

例如，类似这样的内容:

# = colour of tshirt

if (n[n.selectedIndex].value == # + "Front.jpg"){
    show_image(# + 'Back.jpg','back');   
}

if (n[n.selectedIndex].value == # + "Back.jpg"){
    show_image(# + 'Front.jpg','front');   
}

这可能吗，还是我应该为每种颜色(背面和正面)制作一个 if 语句？我确信一定有更好、更紧凑的方法。

这是我到目前为止所拥有的:(仅以一种方式旋转)

function reverseTee() {

    var n = document.getElementById('shirt');
    var image;

    if (n[n.selectedIndex].value == "redFront.jpg"){
        show_image('redBack.jpg','back');   
    }

    if (n[n.selectedIndex].value == "blackFront.jpg"){
        show_image('blackBack.jpg','back');
    }

    if (n[n.selectedIndex].value == "whiteFront.jpg"){
        show_image('whiteBack.jpg','back');
    }

    if (n[n.selectedIndex].value == "lemonFront.jpg"){
        show_image('lemonBack.jpg','back');
    }

}

Answer 1

我认为 for 循环在这里最有意义。创建一个颜色数组，如下所示:

var shirts = ["red","black","white","lemon"];

现在，如果我们查看您的 if 语句，注意到唯一的区别是颜色吗？

function reverseTee() {

    var n = document.getElementById('shirt');
    var image;

    for(var i = 0; i < shirts.length; i++) {
        // If Front -> Back
        if (n[n.selectedIndex].value == shirts[i] + "Front.jpg") 
            show_image( shirts[i] + 'Back.jpg','back'); 
        // If Back -> Front
        if (n[n.selectedIndex].value == shirts[i] + "Back.jpg")
            show_image( shirts[i] + 'Front.jpg','back'); 
    }

}