jquery 使用下一个/上一个按钮循环遍历多个 div

Question

我正在使用下面的代码来遍历 div，它运行良好

$("#nextBtn").click(function() {
  var nextDiv = $(".step:visible").next(".step");
  if (nextDiv.length == 0) { // wrap around to beginning
    nextDiv = $(".step:first");
  }
  $(".step").hide();
  nextDiv.show();
});

$("#prevBtn").click(function() {
  var prevDiv = $(".step:visible").prev(".step");
  if (prevDiv.length == 0) { // wrap around to end
    prevDiv = $(".step:last");
  }
  $(".step").hide();
  prevDiv.show();
});

.step {
  display: none;
}
div.step:first-child {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form">
  <div class="step">This is step 1</div>
  <div class="step">This is step 2</div>
  <div class="step">This is step 3</div>
  <div class="step">This is step 4</div>

  <button id="prevBtn">Prev</button>
  <button id="nextBtn">Next</button>
</div>

我的问题是我将动态添加多组 div 和按钮，这会破坏如下代码

$("#nextBtn").click(function() {
  var nextDiv = $(".step:visible").next(".step");
  if (nextDiv.length == 0) { // wrap around to beginning
    nextDiv = $(".step:first");
  }
  $(".step").hide();
  nextDiv.show();
});

$("#prevBtn").click(function() {
  var prevDiv = $(".step:visible").prev(".step");
  if (prevDiv.length == 0) { // wrap around to end
    prevDiv = $(".step:last");
  }
  $(".step").hide();
  prevDiv.show();
});

.step {
  display: none;
}
div.step:first-child {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<div class="form">
  <div class="step">This is step 1</div>
  <div class="step">This is step 2</div>
  <div class="step">This is step 3</div>
  <div class="step">This is step 4</div>

  <button id="prevBtn">Prev</button>
  <button id="nextBtn">Next</button>
</div>
	
	
	<div class="form">
  <div class="step">This is step 5</div>
  <div class="step">This is step 6</div>
  <div class="step">This is step 7</div>
  <div class="step">This is step 8</div>

  <button id="prevBtn">Prev</button>
  <button id="nextBtn">Next</button>
</div>

我怎样才能使这项工作？因为我无法更改任何元素的类，我也不知道会有多少个元素？

Answer 1

首先，您不能将具有相同 ID 的元素添加到您的页面中，在下面的代码片段中，我将按钮的 ID 替换为类。然后，您所要做的就是调用 jquery parent() 方法以正确的形式显示/隐藏元素:)

希望对您有所帮助:)

$(".nextBtn").click(function() {
  var nextDiv = $(this).parent().find(".step:visible").next(".step");
  if (nextDiv.length == 0) { // wrap around to beginning
    nextDiv = $(this).parent().find(".step:first");
  }
  $(this).parent().find(".step").hide();
  nextDiv.show();
});

$(".prevBtn").click(function() {
  var prevDiv = $(this).parent().find(".step:visible").prev(".step");
  if (prevDiv.length == 0) { // wrap around to end
    prevDiv = $(this).parent().find(".step:last");
  }
  $(this).parent().find(".step").hide();
  prevDiv.show();
});

.step {
  display: none;
}
div.step:first-child {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<div class="form">
  <div class="step">This is step 1</div>
  <div class="step">This is step 2</div>
  <div class="step">This is step 3</div>
  <div class="step">This is step 4</div>

  <button class="prevBtn">Prev</button>
  <button class="nextBtn">Next</button>
</div>
	
	
	<div class="form">
  <div class="step">This is step 5</div>
  <div class="step">This is step 6</div>
  <div class="step">This is step 7</div>
  <div class="step">This is step 8</div>

  <button class="prevBtn">Prev</button>
  <button class="nextBtn">Next</button>
</div>