как удалить класс из html

Question

Поэтому я пытаюсь определить, есть ли у одного из моих навигационных элементов определенный класс при нажатии, и если он действительно удаляет его, а если нет, то добавляет его.

Методология, стоящая за этим, заключается в отображении активного состояния на раскрывающейся кнопке, когда раскрывающийся список открыт. И потерять это состояние после того, как будет щелкнуть другой навигационный элемент или что-то вне выпадающего меню. Эта логика c в настоящее время работает нормально.

Однако другой случай, который у меня есть, - это потерять активное состояние, если была нажата та же кнопка, это в настоящее время не работает. Первое условие в операторе if никогда не выполняется, поэтому класс всегда переключается.

JS:

  $(document).ready(function () {

    //WORKS
    $(document).click(function () {
        $('.link.activeLink').removeClass('activeLink')
    });

    //WORKS
    $('.nav-link').click(function () {
        $('.link.activeLink').removeClass('activeLink')
    });

    //FAILS
    $('.link').click(function () {
        if ($(this).hasClass('activeLink')) {
            $(this).removeClass('activeLink');
        }
        else {
            $(this).toggleClass('activeLink');
        }
    }); 

});

css:

.activeLink {
    background-color: #31A7DF;
}

HTML:

  <a class="nav-link link dropdown-toggle text-white paddingRightButton h-100 noPaddingRightLeft" href="#" data-toggle="dropdown" id="flatRoofingDropdown" role="button" aria-haspopup="true" aria-expanded="false">
                            Flat Roofing
                        </a>

Answer 1

Вам нужно только использовать .toggleClass() Класс Toggle посмотрит и увидит, есть ли он там, и удалит его, если он есть, и добавит его, если его нет. Ваш последний случай должен выглядеть следующим образом:

$('.link').click(function() {
  $(this).toggleClass('activeLink');
}

Код выше all , вам нужно проверять и переключать классы с помощью jQuery. :)

Answer 2

Это, похоже, решило мою проблему

    $(document).ready(function () {
    $(document).click(function (e) {
        $('.link.activeLink').removeClass('activeLink')
    });

    $('.link').click(function (e) {
        if ($(e.target).hasClass('activeLink')) {
            $(this).removeClass('activeLink');
        } else {
            $('.link.activeLink').removeClass('activeLink')
            $(this).toggleClass('activeLink');
        }         
    });
});

Answer 3

Ключевым словом здесь является распространение события, поэтому каждый щелчок по ссылке также является щелчком по документу, поскольку .link является дочерним по отношению к document.

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

$(document).ready(function() {

  $('#flatRoofingDropdown').click(function(event) {
    $(this).toggleClass('activeLink');
  });
  
  $(document).click(function(event) {
  if (!$(event.target).closest('#flatRoofingDropdown').length) {
    $('#flatRoofingDropdown').removeClass('activeLink');
  }
});

});

.activeLink {
  background-color: #31A7DF;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a class="nav-link link dropdown-toggle text-white paddingRightButton h-100 noPaddingRightLeft" href="#" data-toggle="dropdown" id="flatRoofingDropdown" role="button" aria-haspopup="true" aria-expanded="false">
  Flat Roofing
</a>

Answer 4

Нет необходимости добавлять hasClass logi c вокруг toggleClass(), поскольку именно это toggleClass(className) делает для вас.

• делает эквивалент addClass(className), если className отсутствует
• соответствует removeClass(className), если оно

Ссылка здесь: api. jquery .com / toggleclass /

---

Попробуйте это:

<a class="link activeLink">link 1</a>
<a class="link">link 2</a>

$('.link').click(function () {
  $(this).toggleClass('activeLink');
});

// link 1 clicked:
// <a class="link">link 1</a>

// link 2 clicked:
// <a class="link activeLink">link 2</a>

Answer 5

Насколько я понимаю, оператор if вообще не требуется. Согласно jQuery документации toggleClass уже делает эту работу за вас. См. пример здесь похоже, что это то, чего вы пытаетесь достичь?