jsFiddle Demo

Question

所以，我有一些按钮和内容的代码。单击一个按钮时，我希望div容器隐藏/显示。以下是我使用的HTML代码的一部分：

<li>
   <input type="button" id="hideshow" class="showhide1" value="hide/show">
   <div id="content" class="showhide1" style="display: none;">Hello World</div>
</li>
<li>
   <input type="button" id="hideshow" class="showhide2" value="hide/show">
   <div id="content" class="showhide2" style="display: none;">Hello World</div>
</li>
And it goes on like maybe a 100 times O.o...

这是我使用的jQuery：

<script>
    jQuery(document).ready( function() {
         jQuery('#hideshow').live('click', function(event) {        
            jQuery('#content').toggle('hide');
         });
    });
</script>

此代码类型有效，但所有按钮隐藏/显示只有第一个内容div。我认为这是因为我的所有内容都有相同的ID。

但我有不同的类，所以我想知道，如果我可以使用单击按钮的类，然后显示div的内容与按下按钮具有相同的类。可以这样做还是有更好的方法？

Answer 1

首先..始终 ID应该始终是唯一的 ...而是使用类而不推荐live()使用on

不改变大部分代码。

<script>
 jQuery(document).ready(function(){
 jQuery('ul').on('click','.showhide1,.showhide2', function(event) {        
     jQuery(this).next().toggle('hide'); //<--using next()
});
});

你也可以使用兄弟姐妹或最近而不是下一个......

jQuery(this).siblings('.content').toggle('hide'); //<--using siblings()
jQuery(this).closest('.content').toggle('hide'); //<--using closest()

但是你可以为所有元素添加相同的类并使用类选择器

  jQuery('ul').on('click','.elementsClass', function(event) {        
     jQuery(this).next().toggle('hide');
  });

Answer 2

jsFiddle Demo

首先，您必须将ID更改为类，因为HTML ID中的ID是唯一的。

<li>
    <input type="button" class="hideshow showhide1" value="hide/show" />
    <div class="content showhide1" style="display: none;">Hello World</div>
</li>
<li>
    <input type="button" class="hideshow showhide2" value="hide/show" />
    <div class="content showhide2" style="display: none;">Hello World</div>
</li>

然后你可以选择一个兄弟的内容div。

jQuery(document).ready(function(){
    jQuery('.hideshow').on('click', function(event) {        
        jQuery(this).siblings(".content").toggle('hide');
    });
});

P.S - 请注意，自jQuery 1.7以来，.live()函数已被弃用，并在jQuery 1.9中被删除。我正在使用.on()。

Answer 3

<li>
<input type="button" id="hideshow" class="showhide" value="hide/show">
<div id="content" style="display: none;">Hello World</div>
</li>
<li>
<input type="button" id="hideshow" class="showhide" value="hide/show">
<div id="content" style="display: none;">Hello World</div>
</li>

这是你应该使用的jQuery：

<script>
    jQuery(document).ready(function(){
    jQuery('.showhide').on('click', function(event) {        
         $(this).next().toggle();
    });
    });
</script>

隐藏/显示相关元素

3 个答案:

jsFiddle Demo