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

试试这个：添加＆＃34;数据内容＆＃34;

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

你不必为每个元素编写JS代码。您可以在所有class="hide"代码和a上对同一个班级data-content=""进行分类，以切换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 3

我同意，数据属性在这种情况下会很好用。

$(() => {

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

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

});

jquery隐藏显示多个div

3 个答案: