Question

我有导航菜单。如果我单击另一个按钮，它将从该按钮删除.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>

Answer 1

您正在将该课程添加到以前的所有同级中，因为这正是您通过prevAll()所进行的说明。

相反，您可以仅在删除active类的同一行中添加此类，只要您修改选择器以专门针对当前具有active而不是全部{{1 }}兄弟姐妹。

button

此外，您的条件是不必要的，因为它将始终解析为true：

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

将它们放在一起：

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");
});

Answer 2

由于我不了解jQuery，所以我提出了一个简单的JavaScript解决方案。（因为逻辑很简单，所以您可以轻松地翻译它。）

const buttons = document.getElementsByClassName('btn');

for (let i=0; i<buttons.length; i++) {
  buttons[i].addEventListener('click', function(event) {
    // clear all previous buttons
    const prevButton = document.getElementsByClassName('previous')[0];
    
    if (prevButton) prevButton.setAttribute('class', 'btn');
  
    // add previous class to active button
    document.getElementsByClassName('active')[0].setAttribute('class', 'btn previous');
    
    // add active class to current clicked button
    event.target.setAttribute('class', 'btn active');
  });
};

.active { color:green; } 
.previous { color: red; }

<div class="buttons">
          <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>

如何删除上一个第二堂课？

2 个答案: