Как добавить active только следующему или предыдущему классу?

Рейтинг: 1Ответов: 1Опубликовано: 31.10.2014

Добрый день.

У меня есть html:

<div id="textItem26" class="description-box">
<div id="textItem32" class="description-box active">
<div id="textItem52" class="description-box">
<div id="textItem54" class="description-box">
<div id="textItem80" class="description-box">

Нужно сделать, чтобы при клике на кнопку fancybox next и prev класс active у текущего убирался и добавлялся либо только к следующему description-box, либо к предыдущему.

Делаю next():

$('.fancybox-next span').live('click', function(e) {
$('#info-block').find('.description-box').removeClass('active');
$('#info-block .description-box').next().addClass('active');
});

Помогите, пожалуйста. Как сделать, чтобы только следующему или предыдущему классу менять?
Добавляет active вообще ко всем div.

jquery
Источник: Stack Overflow на русском

Ответы

▲ 2Принят

Вот так, к примеру: http://jsfiddle.net/sh3118cj/

HTML

<div id="info-block">
    <div id="textItem26" class="description-box">1</div>
    <div id="textItem32" class="description-box active">2</div>
    <div id="textItem52" class="description-box">3</div>
    <div id="textItem54" class="description-box">4</div>
    <div id="textItem80" class="description-box">5</div>
</div>
<button class="fancybox-prev"><<</button>
<button class="fancybox-next">>></button>

Javascript

$(document).on("click", "button.fancybox-next", function(e) {
    var selectedItem = $('#info-block').find('.active');
    selectedItem.removeClass('active');
    selectedItem.next().addClass('active');
});
$(document).on("click", "button.fancybox-prev", function(e) {
    var selectedItem = $('#info-block').find('.active');
    selectedItem.removeClass('active');
    selectedItem.prev().addClass('active');
});

CSS

.active {
    background: #f00;   
}