jquery隐藏显示多个div

Question

我在寻找更聪明的方法来隐藏和显示多个元素。 我现在的解决方案是为每个要显示的元素创建一个单独的脚本，只需单击一个按钮即可。

<a class="pure-button pure-button-primary" type='button' id='hideshow1'  
value='hide/show' >Show it1 !</a> 
<div id='content1' style="display:none"> 
lorem ipsum 
</div> 

<a class="pure-button pure-button-primary" type='button' id='hideshow2'  
value='hide/show' >Show 2 </a> 
<div id='content2' style="display:none"> 
    lorem ipsum 
</div> 

这是脚本的一部分：

<script> 
jQuery(document).ready(function(){ 
     jQuery('#hideshow1').on('click', function(event) {   
      jQuery('#content1').toggle('hide'); 
     }); 
    }); 
</script> 
<script> 
jQuery(document).ready(function(){ 
     jQuery('#hideshow2').on('click', function(event) {   
      jQuery('#content2').toggle('hide'); 
     }); 
    }); 
</script> 

这样完美的作品，但我认为必须有一个更聪明的方法。任何人都可以给我一个线索如何让它变得更聪明？

Answer 1

你没有写JS代码的每个元素

。您可以在所有a标记和data-content=""上指定class="hide"同一类hide/show（正如Mostafa所述）。但如果你想通过ids来完成。那么你可以按照这个代码。

https://jsfiddle.net/unnxnz71/

HTML

 <a class="pure-button pure-button-primary" type='button' id='hideshow1' value='hide/show' data-value="content1">Show it1 !</a> 
     <div id='content1' style="display:none"> 
     lorem ipsum 
     </div> 

     <a class="pure-button pure-button-primary" type='button' id='hideshow2' value='hide/show' data-value="content2">Show 2 </a> 
     <div id='content2' style="display:none"> 
     lorem ipsum 
     </div> 

JS

$('[id^="hideshow"]').on('click', function(event) { 
     var dataValue = $(this).attr('data-value'); 
     dataValue = $('#'+dataValue); 
     $(dataValue).toggle('hide'); 
    }); 

Answer 2

试试这个：添加 “数据内容”

<a class="hide pure-button pure-button-primary" type='button'  
value='hide/show' data-content="1">Show it1 !</a> 
<div id='content1' style="display:none"> 
lorem ipsum 
</div> 

<a class="pure-button pure-button-primary" type='button'  
value='hide/show' data-content="2">Show 2 </a> 
<div id='content2' style="display:none"> 
    lorem ipsum 
</div> 

脚本：

jQuery(document).ready(function(){ 
     jQuery('.hide').on('click', function(event) {   
      jQuery('#content'+$(this).data("content")).toggle('hide'); 
     }); 
    }); 

Answer 3

我同意，数据属性会在这种情况下工作非常好。

$(() => { 

    const toggle = e => { 
     const content = '#content' + $(e.target).data('content'); 
     $(content).toggle('hide'); 
    }; 

    $('.pure-button').on('click', toggle); 

});