在單擊列表項時應用 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>