Question

我想在这里实现的目标是针对几个div来显示或隐藏对val是什么的贬低。在这种情况下，它不起作用，当我只有一个div目标它工作，但只有1个隐藏不是其中两个。我不确定我是否可以定位多个div？

 $(document).ready(function (){
        $("#state").change(function() {
            // foo is the id of the other select box 
            if ($(this).val() == "twoChoices") {
                $("#foo", "#foo1", "#foo2", "#foo3").show();
            }else{
                $("#foo", "#foo1", "#foo2", "#foo3").hide();
            } 
        });



 <div class="form-group">
 <label for="Choice" class="col-sm-8 control-label">How many?</label>
 <div class="col-sm-2">
 <select id="state" class="form-control">
   <option value="oneChoice">1</option>
   <option value="twoChoices">2</option>
 </select>
</div>
</div>

 <div id="foo" class="form-group">
    <label for="Choice" class="col-sm-8 control-label">First to be</label>
    <div class="col-sm-3">
      <select id="mixOrSingle" class="form-control">
    <option value="mix">Mix</option>
    <option value="single">Single</option>
      </select>
    </div>
 </div>

 <div id="foo2" class="form-group">
   <label for="Choice" class="col-sm-8 control-label">Second to be</label>
   <div class="col-sm-3">
     <select id="mixOrSingle" class="form-control">
   <option value="mix">Mix</option>
       <option value="single">Single</option>
</select>
  </div>
 </div>

Answer 1

因为你使用multiple-selector的方式是错误的。

尝试，

 $("#foo,#foo1,#foo2,#foo3").show();

完整代码，

 $(document).ready(function (){
    $("#state").change(function() {
       $("#foo,#foo1,#foo2,#foo3").toggle($(this).val() == "twoChoices");
    });
 });

Answer 2

您也可以更好地使用类，以保持更清洁，更容易维护？

说html：

<div id="foo" class="form-group twoChoice"></div>
<div id="foo1" class="form-group twoChoice"></div>
<div id="foo2" class="form-group twoChoice"></div>

和JS

$("#state").change(function() {
   $("."+$(this).val()).toggle();
   /* or what ever logic */
});

你当前的例子毫无意义，因为无论价值如何，它隐藏了相同的元素，但我想这只是为了表明问题。关键是要瞄准班级，而不是所有那些被链接的id。

更新，忘了说。一个很好的约定是将这些类命名为更详细，以便更容易看到12个月内发生的事情:)

例如

<div id="foo" class="form-group js-hiddenBy_twoChoice"></div>
<div id="foo1" class="form-group js-hiddenBy_twoChoice"></div>
<div id="foo2" class="form-group js-hiddenBy_twoChoice"></div>

JS

$("#state").change(function() {
   $(".js-hiddenBy_"+$(this).val()).hide();
});

JQuery：show（）和hide（）定位多个div不起作用？

2 个答案: