Question

我正在尝试使用jQuery，但我遇到了一些问题。

<script>
        $(document).ready(function(){
          $("#hide").click(function(){
            $("#comm").slideToggle("fast");
            return false;
          });
        });
</script>
<div id="com">
 <button id="hide">Hide/show</button>
  <div id="comm">
    Data here         
  </div>
</div>

我有多个包含#comm div的#com div。但只有第一个按钮有效。当我有一个show / hide实现时，第一个按钮将控制页面上的所有comm div。

目前，仍然只有第一个按钮有效，它只控制第一个div而不是全部。

Answer 1

Ids应该是唯一，最好使用Class Selector (“.class”)。使用next()使用类comm

转到当前事件源对象的下一个兄弟

<强> Live Demo

$(document).ready(function(){
      $(".hide").click(function(){
        $(this).next(".comm").slideToggle("fast");
        return false;
      });
});

next()：获取每个元素的紧随其后的兄弟一组匹配的元素。如果提供了选择器，它将检索只有当它与选择器jQuery Docs匹配时才是下一个兄弟。

如果您无法更改html，则可以使用Attribute Equals Selector [name="value"]绑定事件，但这是最后一个选项，不推荐使用。

<强> Live Demo

$(document).ready(function(){
      $("[id=hide]").click(function(){
        $(this).next("#comm").slideToggle("fast");
        return false;
      });
});

Answer 2

您正在使用id进行动画制作。请使用class。当您对多个div使用相同的id时，只会选择第一个div，因为根据html指南id只能在整个页面中使用一次。

Answer 3

<script>
        $(document).ready(function(){
          $("#hide").click(function(){
            $(".comm").slideToggle("fast");
            return false;
          });
        });
</script>
<div id="com">
 <button id="hide">Hide/show</button>
  <div class="comm">
    Data here         
  </div>
  <div class="comm">
    Data here         
  </div>
</div>

使用带div的类。 Id必须是唯一的。

jQuery切换只适用于第一个div

3 个答案: