#jquery #addclass #removeclass #toggleclass
#jquery #addclass #removeclass #переключать класс
Вопрос:
Этот приведенный ниже код работает. Я пытаюсь также добавить, что если .hero-build-wrap уже добавил класс в hero-build , и вы снова нажимаете на него, он удаляет его. Я пытался использовать .toggleclass вместо .addClass, но не сработало
$(function() {
$(".hero-build-wrap").click(function() {
$(".hero-build").removeClass("hero-selected");
$(this).children(".hero-build").addClass("hero-selected");
});
});
HTML:
<div class="hero-build-wrap">
<a class="hero-mini hero-mini-assa">
<img class="hero-hover-big" src="">
<img class="hero-hover-small"src=">
</a>
<div class="hero-build hero-selected">
<a href="">
<p>This is a test</p>
</a>
<a href="">
<p>Anothertest</p>
</a>
</div>
</div>
Ответ №1:
Удалите строку, которая добавляет класс
$(function() {
$(".hero-build-wrap").click(function() {
$(this).children(".hero-build").toggleClass("hero-selected");
});
});
Если вы добавите класс, затем измените этот класс, конечным результатом будет отмена его добавления
При этом вы также можете пытаться удалить класс в другом месте, поскольку $().children
это очень странный вызов
Если это так, вы можете сделать что-то вроде:
$(function() {
$(".hero-build-wrap").click(function() {
var $children = $(this).children(".hero-build").toggleClass("hero-selected");
$('.hero-selected').not($children).removeClass("hero-selected");
});
});
Комментарии:
1. всегда старайтесь также предоставлять ожидаемое поведение вместе с некоторой базовой структурой html… Я должен был предположить, что были задействованы другие элементы … и случайно угадал правильно
2. О да, я только что понял, что это работает некорректно, потому что он также добавляет выбранный герой в другой div, а этого не должно быть. Он все еще работает, но я думаю, что он делает больше, чем должен. Позвольте мне добавить html через секунду.
3. С помощью кода он также добавляется в div с классом hero-mini
4. исправлено… просто нужен
".hero-build"
селектор вchildren()