Как удалить второй предыдущий класс?

У меня есть меню навигации. Если я нажму другую кнопку, она удалит .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>
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
51
2

Ответы 2

Вы добавляете класс ко всем предыдущим братьям и сестрам, потому что это именно то, что вы инструктируете через 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');

Поскольку я не знаю 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>

что вы подразумеваете под "странным образом". не этого ли ты желал? @Zyonix

Danyal Imran 30.01.2019 15:03

Если я перехожу от 5. к 4. красный предыдущий находится на следующей кнопке.

Zyonix 30.01.2019 15:06

что вы имели в виду под предыдущей кнопкой? Я предполагаю, что кнопка, нажатая до того, как активная кнопка будет предыдущей кнопкой. Что-то вроде 1->5(предыдущий)->4(активный). @Zyonix

Danyal Imran 30.01.2019 15:09

Другие вопросы по теме