JQuery在单击时显示div并再次显示答案

【问题标题】：JQuery show div when click and show it againJQuery在单击时显示div并再次显示
【发布时间】：2019-07-26 17:08:19
【问题描述】：

因此，如果我单击按钮 A，我希望显示框 A，当我单击 B 之后，我希望显示框 A + B。喜欢显示它之前显示的框。点击A它显示A 点击 b 它显示 A + B 点击 C 显示 A + B + C 等等所有其他按钮。

$(document).ready(function(){
    var $btns = $('.btn').click(function() {
        if (this.id == 'all') {
          $('#parent > div').fadeIn(450);
        } else {
          var $el = $('.' + this.id).fadeIn(450);
          $('#parent > div').not($el).hide();
        }
        $btns.removeClass('active');
        $(this).addClass('active');
      })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
    <div class="row">
        <div class="col-md-8">
            <div class="btn-group" role="group" aria-label="Basic example">
                <button type="button" id="a" class="btn btn-success">A</button>
                <button type="button" id="b" class="btn btn-success">B</button>
                <button type="button" id="c" class="btn btn-success">C</button>
                <button type="button" id="d" class="btn btn-success">D</button>
            </div>
        </div>
    </div>
    <div id="parent">
        <div class="box a">
        <p class="name">A </p>
        </div>
        <div class="box b">
        <p class="name">B </p>
        </div>
        <div class="box c">
        <p class="name">C </p>
        </div>
        <div class="box d">
        <p class="name">D </p>
        </div>
    </div>
</body>

【问题讨论】：

如果你想要的话，可以查看我的answer。
你的很好，但是当我点击它时它会隐藏它，我希望它单独出现
你能回复我的答案吗？顺便说一句，我已经更新了它。

标签： jquery html each

【解决方案1】：

您可以通过id:$("#parent > div."+this.id);隐藏/显示

例子：

if($("#parent > div."+this.id).is(":hidden")){
   $("#parent > div."+this.id).fadeIn(450);
} else{
   $("#parent > div."+this.id).hide();
}

说明：检查是否隐藏，然后相应地显示/隐藏。

片段：

$(document).ready(function(){
    var $btns = $('.btn').click(function() {
        if (this.id == 'all') {
          if($("#parent > div").is(":hidden")){
            $('#parent > div').fadeIn(450);
          } else{
            $("#parent > div").hide();
          }
        } else {        
          if($("#parent > div."+this.id).is(":hidden")){
            $("#parent > div."+this.id).fadeIn(450);
          } else{
            //$("#parent > div."+this.id).hide();
            var $el = $('.' + this.id).fadeIn(450);
            $('#parent > div').not($el).hide();
          }
        }
        $btns.removeClass('active');
        $(this).addClass('active');
      })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
    <div class="row">
        <div class="col-md-8">
            <div class="btn-group" role="group" aria-label="Basic example">
                <button type="button" id="a" class="btn btn-success">A</button>
                <button type="button" id="b" class="btn btn-success">B</button>
                <button type="button" id="c" class="btn btn-success">C</button>
                <button type="button" id="d" class="btn btn-success">D</button>
                <button type="button" id="all" class="btn btn-success">All</button>
            </div>
        </div>
    </div>
    <div id="parent">
        <div class="box a">
        <p class="name">A </p>
        </div>
        <div class="box b">
        <p class="name">B </p>
        </div>
        <div class="box c">
        <p class="name">C </p>
        </div>
        <div class="box d">
        <p class="name">D </p>
        </div>
    </div>
</body>

【讨论】：

【解决方案2】：

$(document).ready(function(){
    $('.btn').on('click',function(){
      if($(this).attr('id')!='all'){
        $('.'+$(this).attr('id')).css('display','block');
      }else{
        $('.a, .b, .c, .d').css('display','block');
      }
    })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
.box{
display:none;
}
</style>
<body>
    <div class="row">
        <div class="col-md-8">
            <div class="btn-group" role="group" aria-label="Basic example">
                <button type="button" id="a" class="btn btn-success active">A</button>
                <button type="button" id="b" class="btn btn-success">B</button>
                <button type="button" id="c" class="btn btn-success">C</button>
                <button type="button" id="d" class="btn btn-success">D</button>
                <button type="button" id="all" class="btn btn-success">All</button>
            </div>
        </div>
    </div>
    <div id="parent">
        <div class="box a">
        <p class="name">A </p>
        </div>
        <div class="box b">
        <p class="name">B </p>
        </div>
        <div class="box c">
        <p class="name">C </p>
        </div>
        <div class="box d">
        <p class="name">D </p>
        </div>
    </div>
</body>

【讨论】：

只需将 box class css none 改为 block

【解决方案3】：

  $(document).ready(function(){
      var $btns = $('.btn').click(function() {
          if (this.id == 'all') {
              $('#parent > div').fadeIn(450);
          } else {
              if($("#parent > div."+this.id).is(":hidden")){
                  $("#parent > div."+this.id).fadeIn(450);
              } else {
                  var $el = $('.' + this.id).fadeIn(450);
                  $('#parent > div').not($el).fadeOut(450);
              }
          }
          $btns.removeClass('active');
          $(this).addClass('active');
      });
   });

像这样更改您的 jquery 脚本。

【讨论】：

这看起来不错，但如果我想让它默认可见怎么办？当我点击 C 时只有 c 节目，如果我点击 A 只有 C 和 A 节目等等？