Как использовать для л oop в JavaScript - PullRequest
Новая
       12

Как использовать для л oop в JavaScript

0 голосов
/ 14 июля 2020

Хорошо, у меня есть неупорядоченный список с двумя элементами. Теперь в моем javascript я пытаюсь добавить прослушиватель событий к этим элементам, чтобы к ним можно было применить класс CSS после щелчка. вот код. Кто-нибудь может заполнить недостающую часть здесь. Спасибо

html часть: - 

<body>
    <h3>Simple Add/Remove Task</h3>
    <h4>To do List</h4>
    <ul>
        <div>
            <li class="todos">Wake up</li>
            <li class="todos">Study</li>
        </div>

    <div>
        <button>Delete</button><br>
        <button>Delete</button>
    </div>
    </ul>

    <script type="text/javascript" src="./script.js"></script>
</body>

Js часть: - 

    var listItems = document.getElementsByClassName("todos");


for (var i = 0; i<listItems.length; i++){
    listItems[i].addEventListener("click", function(){
        
    })
}

Ответы [ 3 ]

1 голос
/ 14 июля 2020

Просто добавьте или переключите нужный класс с помощью classList.add() или classList.toggle().

Также (к сведению):

  • Заголовки не должны использоваться из-за стиля текста внутри них. Как и все остальное в HTML, это semanti c. У вас не должно быть h4, если вы не хотите новый подраздел для h3, которого у вас не было бы, если бы он не был подразделом h2 и так далее. Вы можете (и должны) выполнять форматирование с помощью CSS, а не HTML.
  • Также недопустимо помещать div непосредственно внутри ul. Только элементы li, script или template могут быть дочерними по отношению к ul или ol.
  • Не используйте .getElementsByClassName(). Используйте .querySelectorAll() вместо этого. 

var listItems = document.querySelectorAll(".todos");

for (var i = 0; i<listItems.length; i++){
    listItems[i].addEventListener("click", function(){
      this.classList.toggle("active");  // each click toggles the use of the class
    });
    
    // While looping over the bullets, search for the button within each
    // and set up a click handler for when the delete button gets clicked
    // .closest() will look for the nearest ancestor that matches the selector.
    listItems[i].querySelector("button").addEventListener("click", function(){
      this.closest(".todos").remove();
    });
}
h1 { font-size: 1.2em; }
h2 { font-size: 1em; }

.active { background-color:yellow; }
<h1>Simple Add/Remove Task</h1>
<h2>To do List</h2>
<ul>
  <li class="todos">Wake up <button>Delete</button></li>
  <li class="todos">Study <button>Delete</button></li>
</ul>
0 голосов
/ 14 июля 2020

Используйте for ... of для перебора элементов.

Используйте event.currentTarget , чтобы получить выбранный элемент.

Используйте classList.add , чтобы добавить класс к элементу 

var listItems = document.getElementsByClassName("todos");

for (let listItem of listItems) {
    listItem.addEventListener("click", event => {
        event.currentTarget.classList.add('selected')
    })
}
.selected {
  background: green;
}
<body>
    <h3>Simple Add/Remove Task</h3>
    <h4>To do List</h4>
    <ul>
      <li class="todos">Wake up</li>
      <li class="todos">Study</li>
    </ul>
</body>
0 голосов
/ 14 июля 2020

используйте эту строку в js, чтобы изменить класс: 

listItems[i].className = 'cssClass';

, а затем создать некоторый 'cssClass' css. Если вы не хотите создать css в js, в этом случае вы должны сделать это заранее: 

var style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = '.cssClass { color: green; }';
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...