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

Question

我有一个 7 个 div 和 1 个“下一步”按钮，我正在尝试提出一个解决方案，因此每次单击“下一步”按钮时，当前的 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++;
  });
});