Javascript JQuery:show（）和hide（）针对多个div-donds'；不行？

我在这里试图实现的目标是针对几个div来显示或隐藏val是什么。在本例中，它不起作用，当我只有一个div目标时，它就起作用了，但只对其中一个有效，而不是对其中两个有效。我真的不确定我是否可以针对多个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>

$（文档）.ready（函数（）{
$（“#状态”）.change（函数（）{
//foo是另一个选择框的id
if（$（this.val（）=“twoChoices”）{
$（“#foo”、“#foo1”、“#foo2”、“#foo3”）.show（）；
}否则{
$（“#foo”、“#foo1”、“#foo2”、“#foo3”）.hide（）；
} 
});
有多少
1.
2.
首当其冲
混合
单身
第二
混合
单身

这是因为，您使用的方法是错误的

试试看

完整代码

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

---

您也可以更好地使用类，使其更干净、更易于维护

说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>

---

您当前的示例毫无意义，因为无论值是什么，它都隐藏了相同的元素，但我想这只是为了说明问题。关键是针对类，而不是所有链接id

---

更新，忘了说了。一个很好的约定也是将这些类命名得更详细，这样更容易看到12个月后发生的事情：）

乙二醇

---

@user3311769很高兴提供帮助..！另外，目标选项值不是select。select的值不是，但它的选项值是。@RajaprabhuAravindasamy嘿，当我看到“多少”框时，匹配另一件事我必须点击它并选择2，然后返回1以隐藏。我把@user3311769放在你期望隐藏过程在初始阶段发生的地方。但是除非用户与选择框进行交互，否则这不会发生。如果你确实想发生，只需根据它写css。意思是set

dis播放：对于最初需要隐藏的元素，无

。。

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

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

<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>

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