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

看看你的例子，我认为你可以从使用switch语句中受益。我在下面提供了一个示例。您的样本需要考虑的一个关键点是，if - 条件中的多个条件应该评估为true - 它们都将被执行。如果您决定不使用switch - 语句，则可能需要在函数中使用if/else if/else - 结构。

function reverseTee() {
    var n = document.getElementById('shirt');
    var selected = n[n.selectedIndex].value;
    var image;

    switch(selected) {
        case "redFront.jpg":
            show_image("redBack.jpg", "back");
            break;
        case "redBack.jpg":
            show_image("redFront.jpg", "front");
            break;
        //Add more cases here following the above pattern.
        default:
            //You don't have to have code here but you can. This will be called if none of the above cases match.
    }
}

Answer 2

我认为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'); 
    }

}

JavaScript：显示多种T恤颜色的背面图像的功能

2 个答案: