Jquery addClass removeClass при нажатии на тот же класс

#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()