javascript - 在单击列表项时应用 CSS 类？

Question

因此，我在将 CSS 类应用于单击时的列表项时遇到问题。它似乎适用于列表中的第一项，但不适用于其他项目。

这是其中一个列表的 HTML。

 <div class="card-action">
                        <h5 id='current-list'>Current Set List</h5>
                        <h6 id="set-id-1" class="center">Set #1</h6>
                        <hr>
                        <ul class='collection set-1' id="set-1">
                           <li class="collection-item song-item">
                               Live Wire (AC/DC)
                           </li>
                           <li class="collection-item song-item">
                            Whole Lotta Rosie (AC/DC)
                            <li class="collection-item song-item">
                               Sin City (AC/DC)
                            </li>
                            <li class="collection-item song-item">
                               Jailbreak (AC/DC)
                             </li>
                             <li class="collection-item song-item">
                                The Zoo (Scorpions)
                             </li>
                             <li class="collection-item song-item">
                                Immigrant Song (Led Zeppelin)
                             </li>
                             <li class="collection-item song-item">
                                Breaking The Chains (Dokken)
                             </li>
                             <li class="collection-item song-item">
                               Neon Knights (Black Sabbath)
                             </li>
                             <li class="collection-item song-item">
                                Paranoid (Black Sabbath)
                             </li>
                             <li class="collection-item song-item">
                                Metal Gods (Judas Priest)
                             </li>
                             <li class="collection-item song-item">
                                Breaking The Law (Judas Priest)
                             </li>
                             <li class="collection-item song-item">
                                Green Manalishi (Judas Priest)
                             </li>
                             <li class="collection-item song-item">
                                Diamonds & Rust (Judas Priest)
                             </li>
                        </ul>

这是我正在尝试使用的 JavaScript

const songSelect = querySelector('li');

function changeColor() {
  songSelect.classList.add('song-selection')
  console.log(songSelect)
}
songSelect.addEventListener('click', changeColor);

这是CSS类

.song-selection {
    background-color: gray !important;
    color: red !important
}

标签： javascripthtmlcss

Answer 1

您需要使用document.querySelectorAll获取所有元素，然后循环它们以添加所有事件侦听器。

const songSelects = document.querySelectorAll('li');
function changeColor() {
  this.classList.add('song-selection')
  console.log(this)
}
songSelects.forEach(songSelect=>songSelect.addEventListener('click', changeColor));