我正在制作一个简单的网页,允许用户选择 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');
}
}
最佳答案
我认为 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 恤颜色背面图像的函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25016083/