JQuery покажите div при нажатии и покажите его снова - PullRequest
Новая
       19

JQuery покажите div при нажатии и покажите его снова

0 голосов
/ 05 марта 2019

Поэтому, если я нажимаю на кнопку 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>

Ответы [ 3 ]

0 голосов
/ 05 марта 2019

Вы можете скрыть / показать с помощью 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 голосов
/ 05 марта 2019 
  $(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 следующим образом.

0 голосов
/ 05 марта 2019 

$(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>
...