Как включить или выключить класс, когда я нажимаю на элемент списка?

Question

Я пытаюсь включать и выключать класс каждый раз, когда нажимаю на элемент списка. Я пробовал несколько вещей, таких как использование classList.toggle и обертывание элементов списка в теге привязки, а затем пытался добавить класс к элементам списка с помощью этого, но чем больше я пробую вещей, тем больше я запутался.

Ниже приведен фрагмент моего кода.

var li = document.querySelectorAll("li");

li.addEventListener('click', (e) => {

    addDoneClass();//
  });

function addDoneClass() {
  li.className = "done"
}

.done {
  text-decoration: line-through;
}

  <ul>
      <li random="23">Notebook</li>
      <li>Jello</li>
      <li>Spinach</li>
      <li>Rice</li>
      <li>Birthday Cake</li>
      <li>Candles</li>
    </ul>

Вы могли бы взглянуть на мой JavaScript код, удивительно, почему я сделал это таким образом, потому что я был очень смущен в этот момент и что это было последнее, что я попробовал.

Answer 1

const elements = document.querySelectorAll("li");

elements.forEach((element) => {
    // First option
    element.addEventListener('click', function() {
        this.classList.toggle('active');
    });
    
    // Second option
    //element.addEventListener('click', function() { customHandle(this); });
    
    // Third option
    //element.addEventListener('click', (e) => customHandle(e.target.closest('li')));
});

// For the second and third options
//function customHandle(element) {
//    element.classList.toggle('active');
//}

li.active {
    text-decoration: line-through;
}

<ul>
    <li>Notebook</li>
    <li>Jello</li>
    <li>Spinach</li>
    <li>Rice</li>
    <li>Birthday Cake</li>
    <li>Candles</li>
</ul>

Answer 2

По моему мнению, лучше добавить один элемент прослушивания событий к элементу ul, чем иметь несколько для элементов li.

Вы можете использовать функции classList.add("class") и classList.remove("class"), больше информации . Вам также необходимо проверить, есть ли у текущего элемента класс, для этого используйте функцию classList.contains("class").

Вот пример (обновлен с помощью троичный оператор ):

const ul = document.getElementById("list");

ul.addEventListener('click', (e) => {
  const li = e.target;
  li.classList.contains('done') ? removeDoneClass(li) : addDoneClass(li)
});

function addDoneClass(li) {
  li.classList.add("done");
}

function removeDoneClass(li) {
  li.classList.remove("done");
}

.done {
  text-decoration: line-through;
}

<ul id="list">
  <li random="23">Notebook</li>
  <li>Jello</li>
  <li>Spinach</li>
  <li>Rice</li>
  <li>Birthday Cake</li>
  <li>Candles</li>
</ul>

Совет: используйте classList.toggle("class"), он делает то же самое, но это более чистый способ.

Answer 3

querySelectorAll возвращает список узлов и addEventLister могут применяться только к одному узлу одновременно. Таким образом, чтобы исправить ваш код, вы должны l oop над каждым li в списке. И поскольку вы используете event (evt) с addEventListener, вы можете использовать event.currentTarget, чтобы щелкнуть элемент.

var listItems = document.querySelectorAll("li");
var listItemCount = listItems.length;
for (var i = 0; i < listItemCount; i++) {
  listItems[i].addEventListener('click', (evt) => {
    addDoneClass(evt);//
  });
}

function addDoneClass(evt) {
  evt.currentTarget.className = "done";
}

.done {
  text-decoration: line-through;
}

<ul>
  <li random="23">Notebook</li>
  <li>Jello</li>
  <li>Spinach</li>
  <li>Rice</li>
  <li>Birthday Cake</li>
  <li>Candles</li>
</ul>

Answer 4

Вы должны использовать ключевое слово "this", чтобы отобразить выбранный элемент. Вы можете добиться этого, используя JQuery Like This.

li.active {   text-decoration : line-through; }

$("li").click(function () {
   this.classList.toggle('active');
});

Answer 5

Проблема с областью действия.

function addDoneClass() {
  li.className = "done"
}

В вашем контексте li - это массив элементов списка. Без запуска я бы предположил, что нажатие на любой элемент списка ударило по всем элементам списка. Вместо этого вам нужно передать указанный c элемент списка, который вы хотите изменить.

li.addEventListener('click', (e) => {
  addDoneClass(this); //this is the list item being clicked.
});

function addDoneClass(obj) {
  // Now you can change to toggle if you want.
  obj.className = "done"
  // ie obj.className.toggle("done");
}