Как удалить класс с jQuery из всех div, а не только из братьев и сестер?

Я использую jQuery, чтобы добавить класс «выбранный» в div, когда пользователь нажимает на него (он добавляет красную рамку к миниатюре). В то же время я хочу удалить класс из ранее выбранного div.

Я могу заставить это работать, если все элементы div являются одноуровневыми, но другие элементы div в документе остаются выбранными. Страница, которую я проектирую и разрабатываю, требует, чтобы элементы div не могли быть родственными элементами. Как я могу удалить класс «выбранный» в ранее выбранном div в любом месте документа, а не только в братьях и сестрах?

Вы можете просмотреть и отредактировать мой пример на jsfiddle: http://jsfiddle.net/3s4dM/6/

jQuery:

$(".thumbnail").click(function() {
    $(this).addClass("selected").siblings().removeClass("selected");
})

CSS:

.thumbnail {
    background: #dddddd;
    width: 42px;
    height: 42px;
    margin-bottom: 5px;
}

.thumbnail:hover {
    cursor: pointer;
}

.thumbnail.selected {
    width: 36px;
    height: 36px;
    border: 3px solid #C72D30;
}

HTML:

<section>

    <div class="thumbnail"></div>

</section>

<section>

    <div class="thumbnail"></div>

</section>

<section>

    <div class="thumbnail"></div>
    <div class="thumbnail"></div>
    <div class="thumbnail"></div>

</section>

javascript jquery siblings addclass removeclass
person dylanstewart    schedule 13.02.2014    source источник
comment
Спасибо за все предложения. Вы можете увидеть ход работы здесь: tenbluedevils.com /esalon/tinted-love/   -  person dylanstewart    schedule 14.02.2014

Ответы (4)


arrow_upward
3
arrow_downward

Вы можете использовать комбинированный селектор, чтобы получить все элементы div с классами thumbnail и selected, а затем удалить из него класс selected (поскольку вы снова добавляете selected к текущей миниатюре, игнорируйте это также с помощью not())

$(".thumbnail").click(function() {
    $('.thumbnail.selected').not(this).removeClass("selected")
    $(this).addClass("selected");
})

Демонстрация: Fiddle

person Arun P Johny    schedule 13.02.2014
comment
Спасибо! Это прекрасно работает. Очень признателен. Другие предложения тоже работают хорошо, но я предпочитаю использовать .not() и комбинированный селектор. - person dylanstewart; 14.02.2014

arrow_upward
1
arrow_downward

Вы можете удалить класс selected из всех текущих элементов, у которых есть .selected, и добавить класс selected к выбранному элементу .thumnail:

$(".thumbnail").click(function () {
    $('.selected').removeClass("selected");
    $(this).addClass("selected");
});

Обновленный скрипт

person Felix    schedule 13.02.2014

arrow_upward
1
arrow_downward

Попробуй это?

$(".thumbnail").click(function() {
    $('.selected').removeClass('selected');
    $(this).addClass("selected");
});
person francisco.preller    schedule 13.02.2014

arrow_upward
0
arrow_downward

Если есть все div, вы можете сделать это так.

$(".thumbnail").click(function() {
    $('div').removeClass('selected');
    $(this).addClass("selected");
});
person CRABOLO    schedule 13.02.2014
comment
Это работает для этого примера, но, вероятно, не является хорошей практикой в ​​целом, особенно с учетом того, что selected — это такой многоразовый класс. - person Rick Hanlon II; 13.02.2014
comment
О, да, я полагаю, это делает этот ответ лучше, чем другие, с точки зрения техники! - person Rick Hanlon II; 13.02.2014