时间戳

首页 > 解决方案 > 如何删除第二个上一课？

javascript - 如何删除第二个上一课？

问题描述

我有导航菜单。如果我单击另一个按钮，它会从该按钮中删除 .active 并将其添加到单击的按钮中。我只想将类“previousButton”添加到上一个按钮。我的解决方案为所有上一个按钮提供上一个类。

$(".btn").first().addClass("active");

$(".btn").focus(function(){
  $(this).siblings("button").removeClass("active");
  $(this).addClass("active");


  if($(this).hasClass("active")) {
    $(this).prevAll().addClass("previous");
  }

  $(".previous").last().addClass("previousButton");



  
});
.active {color:green};
.previous {color: white};
.previousButton {color: pink};
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="buttons">
          <button class="btn" >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>

标签： javascriptjquery

解决方案

您正在将该类添加到所有以前的兄弟姐妹中，因为这正是您通过prevAll().

相反，您可以在删除类的同一行中添加此类active，前提是您修改选择器以专门针对当前具有的元素active，而不是所有button同级元素。

$(this).siblings(".active").removeClass("active").addClass('previous');

此外，您的条件是不必要的，因为它总是会解析为 true：

if ($(this).hasClass("active")) { //<-- always true - we added the class in the previous line

把它们放在一起：

$(".btn").focus(function(){
    $(this).siblings(".active").removeClass("active").addClass('previous');
    $(this).addClass("active");
    $(".previous").last().addClass("previousButton");
});

或者为了进一步减少代码，可以合并回调中的第一行和第二行：

$(this).addClass("active").siblings(".active").removeClass("active").addClass('previous');

推荐阅读