У меня есть меню навигации. Если я нажму другую кнопку, она удалит .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>


![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Вы добавляете класс ко всем предыдущим братьям и сестрам, потому что это именно то, что вы инструктируете через 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>Если я перехожу от 5. к 4. красный предыдущий находится на следующей кнопке.
что вы имели в виду под предыдущей кнопкой? Я предполагаю, что кнопка, нажатая до того, как активная кнопка будет предыдущей кнопкой. Что-то вроде 1->5(предыдущий)->4(активный). @Zyonix
что вы подразумеваете под "странным образом". не этого ли ты желал? @Zyonix