抱歉,这里是 js 新手
我从另一个 stackoverflow 问题中得到了这个 JS 代码
$(document).ready(function(){
$('#cart').on('change', function() {
if ( this.value == '1')
{
$(".tea").show();
}
else
{
$(".coffee").hide();
}
});
});
这对其他人有用,但对我不起作用,我可能做错了什么?
http://codepen.io/anon/pen/waexVV
当选择茶时,它应该将图像从咖啡更改为茶,但仅当您再次选择茶和咖啡时才会更改图像
我不知道我做错了什么,我只想在选择下拉列表中的一项时显示一张图像并隐藏其他图像
我正在使用bootstrap-select这个插件可能有问题吗?
非常感谢
最佳答案
问题似乎是您在检查选择了哪个选项之前没有隐藏现有图像。
试试这个代码:
$(document).ready(function(){
$('#cart').on('change', function() {
$('.coffee, .tea').hide();
switch (this.value) {
case "1":
$('.coffee').show();
break;
case "2":
$('.tea').show();
break;
}
});
});
您应该向图像添加一个公共(public)类,这样一开始就更容易隐藏。
Switch 使添加新产品变得更加容易,但在这里您还可以通过添加具有选项列表中的值的类来改进脚本。示例:
$(document).ready(function(){
$('#cart').on('change', function() {
$('.productimages').hide(); // Same class for all product images
$('.productImage-' + this.value).show();
});
});
HTML:
<img class="productimages productImage-1" src="coffee.jpg" alt="coffee" />
<img class="productimages productImage-2" src="tea.jpg" alt="tea" />
关于javascript - 显示/隐藏div关于下拉列表更改的问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30798825/