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

当选择Tea时，它应该将图像从咖啡更改为茶，但只有当您再次选择茶和咖啡时才会更改图像

我不知道我做错了什么，我只想显示一个图像并在选择下拉列表中时隐藏其他图像

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

非常感谢

Answer 1

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

试试这段代码：

$(document).ready(function(){
    $('#cart').on('change', function() {
      $('.productimages').hide(); // Same class for all product images
      $('.productImage-' + this.value).show();
    });
});

您应该在图片中添加一个公共类，因此最初可以更容易隐藏。

Switch可以更轻松地添加新产品，但您也可以通过在选项列表中添加值来改进脚本。例如：

<img class="productimages productImage-1" src="coffee.jpg" alt="coffee" />
<img class="productimages productImage-2" src="tea.jpg" alt="tea" />

HTML：

WebBrowser1.Hide()

Answer 2

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

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

Answer 3

即使你可以操作你的班级来隐藏元素：

$(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 4

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

在下拉列表更改问题上显示/隐藏div

5 个答案: