Скрыть/Показать связанные элементы

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 , Я думаю, потому что у меня одинаковые идентификаторы во всем.

Но у меня разные классы, поэтому мне было интересно, могу ли я взять класс нажатой кнопки, а затем показать содержимое div с тем же классом, что и нажатая кнопка. Можно ли это сделать или есть лучший способ?

Answer 1

jsFiddle Demo

Сначала вы должны изменить идентификаторы в классы, потому что в HTML-идентификаторах призваны быть уникальными.

<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 - Обратите внимание на функцию .live() является устаревшим, так как JQuery 1.7 и был удален в JQuery 1.9. Вместо этого я использую .on().

Answer 2

первой очереди .. как всегда 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 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> 

И вот jQu ery Вы должны использовать:

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