使用 Jquery 使用 1 个按钮一次切换多个 div

Question

我有四个 div，我想用一个按钮一次切换一个。 我想一个接一个地切换它们，而不是随机切换。 我尝试过类似下面的方法。

 $(document).ready(function() { $('#toggle').click(function() { $('#1').hide(); }); $('#toggle').click(function() { $('#2').hide(); }); $('#toggle').click(function() { $('#3').hide(); }); $('#toggle').click(function() { $('#4').hide(); }); });

 .divs { border: 1px solid; height: 30px; }

 <div id='1' class='divs'></div> <div id='2' class='divs'></div> <div id='3' class='divs'></div> <div id='4' class='divs'></div> <button id='toggle'> toggle </button>

Answer 1

保存每次点击的状态。

$(document).ready(function() {

  var state = 1;
  $('#toggle').click(function() {

    if(state==1){
       $('#1').hide();
       state=2;
    } 
    else if(state==2){
       $('#2').hide();
       state=3;
    }
    else if(state==3){
       $('#3').hide();
       state=4;
    }
    else if(state==4){
       $('#4').hide();
       state=1; //back to state
    }
  });

Answer 2

  $(document).ready(function() {
  $('#toggle').click(function() {
    $('.divs:visible:first').hide();
  });
});

Answer 3

试试这个

var count = 1;
$(document).ready(function () {
    $('#toggle').click(function(){
        $('.divs').show();
        if(count == 4)
            count = 1;
        $('#' + count).hide();
        count++;
    });
});

Answer 4

首先，保留数字 id 并不好，所以考虑到您以后会更改它们，我正在写带有数字 id 和没有数字 id 的答案。

使用数字 ID，很容易做到。

假设您有按钮来切换其他四个 div，那么它看起来像这样：

 var state = 1; $("#toggleButton").click(function(){ $("#"+state++).slideToggle(); if(state===5){state=1;} });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <div id='1' >1</div> <div id='2' >2</div> <div id='3' >3</div> <div id='4' >4</div> <button id="toggleButton"> toggle </button>

现在来到非数字ID。

 var state = 1; $("#toggleButton").click(function(){ $("#div"+state++).slideToggle(); if(state===5){state=1;} });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <div id='div1' >1</div> <div id='div2' >2</div> <div id='div3' >3</div> <div id='div4' >4</div> <button id="toggleButton"> toggle </button>

仅供参考：在我看来，您不应该使用数字 ID。

---

进一步在代码中添加更多内容。

如果您不知道会有多少个 div，但您有一个明确的规则，即 div遵循序列，无论它们是否具有数字/非数字 id ，那么您可以稍微更改代码以合并它这个。

 var state = 1;//first button id to be toggled var total = 4;//this will be the total number of divs to be handled by the button $("#toggleButton").click(function(){ $("#"+state++).slideToggle(); if(state===(total+1)){state=1;} });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <div id='1' >1</div> <div id='2' >2</div> <div id='3' >3</div> <div id='4' >4</div> <button id="toggleButton"> toggle </button>

快乐编码。

Answer 5

使用类而不是 Id 多次使用

 var i = 1; $('#toggle').click(function(){ $('.divs').show(); $('#' + i).hide(); i++; });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id='1' class='divs'>dsgsdg</div> <div id='2' class='divs'>64636</div> <div id='3' class='divs'>46y</div> <div id='4' class='divs'>4373477</div> <button id='toggle'> toggle </button>

Answer 6

循环遍历每个元素并使用切换。 这会产生您想要的效果。

$('button').click(function(){
  $('.divs').filter(function(index,item){
  $(item).toggle('slow')
 })
})

看看这个演示 - https://jsfiddle.net/ukw5wcmt/

Answer 7

  var i = 1;
    $('#toggle').click(function(){
      $('.divs').show();
      $('#' +  i).hide();
      if(i==4)
        {
        i=1;
        }else{
        i++;
       }
    });

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div id='1' class='divs'>dsgsdg</div>
    <div id='2' class='divs'>64636</div>
    <div id='3' class='divs'>46y</div>
    <div id='4' class='divs'>4373477</div>

    <button id='toggle'>
      toggle
    </button>

尝试这个

Answer 8

 .hide{ display: none; } 

  $(document).ready(function(){
         $(".click-btn").click(function(){
          var fid = $(".hide:first").prop("id");
           $("#"+fid).removeClass("hide");  
        });
        
        $(".remove-tag").click(function(){
          $(this).parent().addClass("hide");
        });
    });

    <div id="cart-1" class="hide">
        <div class="remove-tag">x</div>
        <h5>1</h5>  
    </div>
    
    <div id="cart-2" class="hide">
        <div class="remove-tag">x</div>
        <h5>2</h5>  
    </div>
    
    <div id="cart-3" class="hide">
        <div class="remove-tag">x</div>
        <h5>3</h5>  
    </div>
    
    <div id="cart-4" class="hide">
        <div class="remove-tag">x</div>
        <h5>4</h5>  
    </div>
    
    <div id="cart-5" class="hide">
        <div class="remove-tag">x</div>
        <h5>5</h5>  
    </div>
        
    <button class="click-btn">click</button>