点击时JQuery显示div并再次显示

问题描述 投票：0回答：3

因此，如果我点击按钮A我想要显示框A，当我点击它之后我想要显示框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>
jquery html each
3个回答
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>
0
投票

$(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>
0
投票
  $(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脚本。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.