在单击列表项时应用 CSS class？

Question

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

这是其中一个列表的 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 class

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

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));

Answer 2

将事件侦听器添加到每个列表项被认为是不好的做法。 相反，您可以使用单击事件来处理所有列表项。

而是做这样的事情

const songSelects = document.getElementById('set-1'); // This is your UL element

function changeColor(e) {
  e.target.classList.add('song-selection');
}

songSelects.addEventListener('click', changeColor);

此示例将向您的 UL 元素添加一个事件侦听器，该事件侦听器将捕获列表中每个单击的列表项。 您可以通过事件 object 访问已单击的实际项目，特别是其target属性。 然后，这会将您的 class 添加到单击的单个列表项中。

此过程称为事件委托，如果您愿意，可以在此处阅读更多信息https://javascript.info/event-delegation

有关为什么应该使用事件委托而不是为每个项目添加侦听器的更多详细信息。 https://ehsangazar.com/optimizing-javascript-event-listeners-for-performance-e28406ad406c

Answer 3

编辑：再想一想，克里斯有一个更好的答案。 我的方法让我们为每个li标签添加eventListeners ，从长远来看这可能很麻烦。 他的方法让我们将一个eventListener添加到li标签的公共父级。 - 总是被 StackOverflow 中的人谦卑。 :D

---

你需要在你的li标签上使用document.querySelectorAll来 select 你所有的li标签。

然后你需要在包含这些li标签的数组上使用forEach()来循环它们并给它们一个eventListener 。 在每个li标签上添加eventListener后，您可以为它们提供您创建的changeColor function。

但是，我们需要稍微修改一下 function。 我用this.classList.add("song-selection"); 以选定的li标签为目标。

你可以在下面看到我的工作代码。 希望它有帮助！

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

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

 <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>