Question

我需要这样做。用户单击.next按钮-> .btn：.active之后的第一个孩子-> trigger（“ click”）-> removeClass（“。active”）-> addClass（“。active”）至下一个.btn

$(".next").click(function() {
  $(".active").next().trigger("click");
})

.active{
color:green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

      <div class="buttons">
        <div class="content">
          <button class="btn active" >1. Page</button>
          <button class="btn" >2. Page</button>
          <button class="btn" >3. Page</button>
          <button class="btn" >4. Page</button>
          <button class="btn" >5. Page</button>
        </div>
      </div>


      <button type="button" name="button" class="next next1">Next <span class="nextBut">
        <i class="fas fa-arrow-right">></i></span>
      </button>

Answer 1

在这种情况下，触发单击不会执行任何操作，因为按钮没有绑定到任何单击事件处理程序。我建议像这样直接添加类（并将其从所有其他类中删除）：

$(".next").click(function() {
  //determine which button will be active next
  const $nextActiveButton = $(".btn.active").next();

  //remove "active" class from all buttons
  $(".btn").removeClass('active');

  //add the class to the active button
  $nextActiveButton.addClass('active');  
});

.active{
color:green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

      <div class="buttons">
        <div class="content">
          <button class="btn active" >1. Page</button>
          <button class="btn" >2. Page</button>
          <button class="btn" >3. Page</button>
          <button class="btn" >4. Page</button>
          <button class="btn" >5. Page</button>
        </div>
      </div>


      <button type="button" name="button" class="next next1">Next <span class="nextBut">
        <i class="fas fa-arrow-right">></i></span>
      </button>

点击不会调用点击

1 个答案: