切换多个具有相同 class 的元素

Question

我正在尝试通过某些 class 切换多个 div 元素。所有 div 都具有相同的 class "step" 并且通过单击按钮，应该在第一个 div 上添加 class "active"，下次点击应该删除 "active" class 并将其放在下一个 div 等等。

示例html:

<button id="toggleNext">Next</button>
<div id="offer" class="step">
              <h2>Header -1</h2>
                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p>
            </div>
          <div id="skills" class="step">
              <h2>Header -2</h2>
                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p>
            </div>
  <div id="service" class="step">
              <h2>Header -3</h2>
                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p>
            </div>

最小CSS，只是为了让我们的活动class可见

.active {
   background: red;
}

我还不是专业人士，所以请原谅我糟糕的尝试，但我希望它能展示我想要实现的目标？

$("#toggleNext").on("click",function() { 

    if( $(".step").first().hasClass("active") ) {
            $(".step").first().removeClass("active").next().addClass("active");

    } else if( $(".step").not(".step:first").hasClass("active") ) {
            $(".step").prevAll().removeClass("active");

    } else {
            $(".step").first().addClass("active").nextAll().removeClass("active");
    }
})

非常感谢您的帮助！

Answer 1

您可以创建计数器，它会在点击时递增，直到它达到与 .step div 的数量相同的数量，然后 return 到 0。

var i = 0;
$('#toggleNext').click(function() {
  $('.step').eq(i).addClass('active').siblings('.step').removeClass('active');
  (i < $('.step').length - 1) ? i++ : i = 0;
});

.active {
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="toggleNext">Next</button>
<div id="offer" class="step">
  <h2>Header -1</h2>
  <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</div>
<div id="skills" class="step">
  <h2>Header -2</h2>
  <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</div>
<div id="service" class="step">
  <h2>Header -3</h2>
  <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</div>

切换多个具有相同 class 的元素

toggle thru several elements with the same class

jquery

toggleclass