Как изменить стиль выбранного LI - PullRequest
Новая
       7

Как изменить стиль выбранного LI

1 голос
/ 03 февраля 2020

Я пытаюсь изменить цвет LI, когда нажимаю на него. это код: 

todosUl.addEventListener('click', function(event) {
    //get the element that was clicked on
    var elementClicked = event.target;
    //check if the elemenClicked is a Delete button
    if (elementClicked.className === 'completedButton') {
        var element = document.getElementById(elementClicked.parentNode.id);
        var lis = document.getElementById(element.id);
        console.log(lis);
        lis.style.color = "red";
    }
});

Когда я ставлю console.log(lis), консоль дает элемент Li, поэтому он выбирает его правильно, когда вы нажимаете на элемент, но не меняет его цвет.

когда я проверяю Ли, вот что появляется: 

<li class="li-class" id="0">( ) 1<input class="editor" id="editor0"><input type="checkbox" class="completedButton"><button class="deleteButton" id="deleteButton0">X</button><button class="saveButton" id="saveButton0">save changes</button></li>

Ответы [ 2 ]

0 голосов
/ 03 февраля 2020

Ваш лог c кажется правильным, однако вы можете рассмотреть другой подход, как показано во фрагменте кода ниже: 

const todosUl = document.querySelector("ul.todos");

/* Select all li elements of todos ul, and set each up inside of
forEach callback */
todosUl.querySelectorAll("li.li-class").forEach((li) => {

  /* Logic that changes li color when completed checkbox clicked */
  const onClickCompleted = () => {
    li.style.color = "red";
  }

  /* Bind click completed callback logic to the checkbox of this current li element */
  li.querySelector("input.completedButton").addEventListener('click', onClickCompleted);
  
  /* Bind click logic for other buttons of li element
  li.querySelector("button.deleteButton").addEventListener('click', onClickDeleted);
  li.querySelector("button.saveButton").addEventListener('click', onClickSave);
  */
});
<ul class="todos">
  <li class="li-class">( ) 1<input class="editor">
    <input type="checkbox" class="completedButton">
    <button class="deleteButton" class="deleteButton">X</button>
    <button class="saveButton" class="saveButton">save changes</button>
  </li>
  <li class="li-class">( ) 2<input class="editor">
    <input type="checkbox" class="completedButton">
    <button class="deleteButton" class="deleteButton">X</button>
    <button class="saveButton" class="saveButton">save changes</button>
  </li>
</ul>

Этот метод использует преимущества запросов документов, относящихся к каждому li элементу вашего списка. Преимущество этого заключается в том, что привязка logi c событий не зависит от конкретных c идентификаторов элементов (ie deleteButton0, editor1 и т. Д. 1018 *), что в долгосрочной перспективе приводит к созданию более удобного кода. , Надеюсь, это поможет!

0 голосов
/ 03 февраля 2020

Вы можете поймать щелчки на родительском элементе ul и, если это сам li или один из его дочерних, раскрасьте его: 

const ulElement = document.querySelectorAll('ul')[0];
ulElement.addEventListener('click', function (event) { // catch all click event on parent ul
  if (!event.target || !event.target.parentElement) {return} // if the click not on li or one of the child ignore it
  else if (event.target.parentElement.classList.contains('li-class')) { // if clicked element's parent is li with the class
    event.target.parentElement.style.color = 'red';
  } 
  else if (event.target.classList.contains('li-class')) { // if clicked element is li with the class
    event.target.style.color = 'red'
  }
  
}, false);
<ul>
<li class="li-class" id="0">( ) 1<input class="editor" id="editor0"><input type="checkbox" class="completedButton"><button class="deleteButton" id="deleteButton0">X</button><button class="saveButton" id="saveButton0">save changes</button></li>
<li class="li-class" id="1">( ) 1<input class="editor" id="editor1"><input type="checkbox" class="completedButton"><button class="deleteButton" id="deleteButton1">X</button><button class="saveButton" id="saveButton1">save changes</button></li>
<li class="li-class" id="2">( ) 1<input class="editor" id="editor2"><input type="checkbox" class="completedButton"><button class="deleteButton" id="deleteButton2">X</button><button class="saveButton" id="saveButton2">save changes</button></li>
</ul>

СТАРЫЙ ОТВЕТ:

Я полагаю, что есть много способов добиться такого поведения, это решение отлавливает все события, на которые нажали, и если оно .li-class сам или ребенок этого класса - измените цвет.

Фрагмент: 

document.addEventListener('click', function (event) { // catch all click event on the documnt
  if (!event.target || !event.target.parentElement) {return} // if the click is on the document ignore it
  else if (event.target.parentElement.classList.contains('li-class')) { // if clicked element's parent is li with the class
    event.target.parentElement.style.color = 'red';
  } 
  else if (event.target.classList.contains('li-class')) { // if clicked element is li with the class
    event.target.style.color = 'red'
  }
  
}, false);
<ul>
<li class="li-class" id="0">( ) 1<input class="editor" id="editor0"><input type="checkbox" class="completedButton"><button class="deleteButton" id="deleteButton0">X</button><button class="saveButton" id="saveButton0">save changes</button></li>
<li class="li-class" id="1">( ) 1<input class="editor" id="editor1"><input type="checkbox" class="completedButton"><button class="deleteButton" id="deleteButton1">X</button><button class="saveButton" id="saveButton1">save changes</button></li>
<li class="li-class" id="2">( ) 1<input class="editor" id="editor2"><input type="checkbox" class="completedButton"><button class="deleteButton" id="deleteButton2">X</button><button class="saveButton" id="saveButton2">save changes</button></li>
</ul>
...