Question

我有一个7个div和1个“Next”按钮，我试图找到一个解决方案，所以每次单击“下一步”按钮时，当前div会向上滑动，下一个div会向下滑动。最后，它会回到第一个div。

HTML：

<div id='selection_1'>selection_1</div>

<div id='selection_2' style='display:none'>selection_2</div>

<div id='selection_3' style='display:none'>selection_3</div>

<div id='selection_4' style='display:none'>selection_4</div>

......

<div id='selection_7' style='display:none'>selection_7</div>

<button type='button'>Next</button>

JS：

$(function(){
 $("#next").click(function () {
          $('#selection_1').slideUp();
          $('#selection_2').slideDown();
    });
});

但我卡住了，因为它只能工作一次。我不能再次单击下一步以使selection_3显示出来，更不用说在圆形结束时返回选择1。

我对JQuery很陌生，所以感谢任何建议！

Answer 1

将索引存储在某个全局变量中并使用它来生成id，同时将id分配给下一个按钮

<强> Live Demo

$(function(){
   currentNum = 1;
   $("#selection_1").show();
   $("#next").click(function () {
      $('#selection_' + currentNum).slideUp();
       if (currentNum > 7) currentNum = 0;
      $('#selection_' + (currentNum+1)).slideDown();
      currentNum++;
  });
});

Answer 2

使用此功能可以帮助您

 $(function(){
        var count=1;
        $("#next").click(function () {
              $('#selection_'+count).slideUp();
              $('#selection_'+(count+1)).slideDown();
                 count+= 1;
              if(count==7){
                   count=1;
            }
       });
  });

Answer 3

选中 Demo Fiddle 。

$(function(){
    var current = 1;
    $('div[id^="sel"] div').hide();
    $('#selection_1 div').slideDown();
    $("#next").click(function () {
        current++;
        $('#selection_'+(current-1)+' div').slideUp();
        $('#selection_'+current+' div').slideDown();
    });
});

一开始，只显示第一个<div>，并在点击下一个时继续增加数字。

如何在每次点击时更改元素ID中的数字？

3 个答案: