Show/hide div 关于下拉变化问题

Question

抱歉这里是 js 新手

我从另一个 Whosebug 问题中得到了这个 JS 代码

$(document).ready(function(){
        $('#cart').on('change', function() {
          if ( this.value == '1')
          {
            $(".tea").show();
          }
          else
          {
            $(".coffee").hide();
          }
        });
    });

它对另一个人有效，但对我无效，我可能做错了什么？

http://codepen.io/anon/pen/waexVV

当 selected Tea 时，它应该将图像从 Coffee 更改为 tea，但是当您再次 select tea 和 coffee 时，它只会改变图像

我不知道我做错了什么，我只想在下拉列表中的项目 selected

时显示一张图片并隐藏其他图片

我正在使用 bootstrap-select 这个插件会不会有问题？

非常感谢

Answer 1

$('.selectpicker').selectpicker();      

$(document).ready(function(){
            $('#cart').on('change', function() {
              if ( this.value == '1')
              {
                $(".tea").show();
                $(".coffee").hide();
              }
              else
              {
                $(".tea").hide();
                $(".coffee").show();
              }
            });
        });

Answer 2

甚至你可以在你的class上操作隐藏元素：

$(document).ready(function(){
    $('#cart').on('change', function() {
        if ( this.value == '1')
        {
             $(".tea").removeClass('hide-it');
             $(".coffee").addClass('hide-it');
        }
        else
        {
             $(".tea").addClass('hide-it');
             $(".coffee").removeClass('hide-it');
        }
    });
});

http://codepen.io/anon/pen/GJEXge

Answer 3

Change this in your script
    $(document).ready(function(){
                $('#cart').on('change', function() {
                  if ( this.value == '1')
                  {
                    $(".coffee").hide();
                    $(".tea").show();
                  }
                  else
                  {
                      $(".tea").hide();
                    $(".coffee").show();
                  }
                });
            });

Answer 4

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

试试这个代码：

$(document).ready(function(){
        $('#cart').on('change', function() {
          $('.coffee, .tea').hide();
          switch (this.value) {
            case "1":
              $('.coffee').show();
              break;
            case "2":
              $('.tea').show();
              break;
          }
        });
    });

你应该有一个共同的 class 添加到图像中，这样一开始就更容易隐藏。

Switch 可以更轻松地添加新产品，但在这里您还可以通过添加 class 和选项列表中的值来改进脚本。示例：

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

Answer 5

试一试： demo

$(document).ready(function(){
            $('#cart').on('change', function() {
              if ( this.value == '1')
              {
                    $(".coffee").hide('slow');
                    $(".tea").show('slow');
              }
              else
              {
                    $(".tea").hide('slow');
                    $(".coffee").show('slow');
              }
            });
        });

Show/hide div 关于下拉变化问题

Show/hide div on dropdown change problems

javascript

onchange

twitter-bootstrap