Question

我试图通过某个类来切换几个div元素。所有div都有相同的类“步骤”，单击一个按钮，应该在第一个div上添加“active”类，下一次单击应该删除“active”类并将其放在下一个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，只是为了使我们的活动类可见

.active {
   background: red;
}

我还没有Pro'，所以请原谅我的不良尝试，但我希望它显示出我想要实现的目标？

$("#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的数量相同，然后返回到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>

通过同一个类切换几个元素

1 个答案: