时间戳

首页 > 解决方案 > 单击不会调用单击

javascript - 单击不会调用单击

问题描述

我需要这样做。用户单击 .next 按钮 -> .btn:first-child after .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>

标签： javascriptjquery

解决方案

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

$(".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>

推荐阅读