Question

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

if (line.startswith('dilute dimensional Zimm longest')):
    print(next(f))

$(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');
      })
})

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

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

Answer 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脚本。

jQuery单击时显示div并再次显示

3 个答案: