javascript - 显示/隐藏div关于下拉列表更改的问题

Question

抱歉，这里是 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这个插件可能有问题吗？

非常感谢

Answer 1

问题似乎是您在检查选择了哪个选项之前没有隐藏现有图像。

试试这个代码:

$(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" />