為什么querySelectorAll沒有選擇我的課程？

我正在嘗試選擇六個類名為 .hours 的元素，但使用 document.querySelectorAll() 不起作用，如果我使用 document.querySelector() 它只回傳名稱為 .hours 的第一個類，使用 document.getElementsByClassName( ) 也不起作用。請幫忙 ：）

const hoursTime = document.getElementsByClassName('hours');
const lastTime = document.querySelectorAll('.last-time');

hoursTime.onclick = function() {
    hoursTime.innerHTML = "Clicked";
}

<div class="report_container">

      <div class="work_container">
        <div class="work">
          <div class="work_head">
            <h3>Work</h3>
            <img src="/images/icon-ellipsis.svg" class="elips" alt="">
          </div>
          
          <div class="work_content">
            <h1 class="hours">0hrs</h1>
            <p class="last-time">Select TIme Tracking</p>
          </div>
        </div>
      </div>

      <div class="play_container">
        <div class="play">
          <div class="play_head">
            <h3>Play</h3>
            <img src="/images/icon-ellipsis.svg" class="elips" alt="">
          </div>
          
          <div class="play_content">
            <h1 class="hours">0hrs</h1>
            <p class="last-time">Select TIme Tracking</p>
          </div>
        </div>
      </div>

      <div class="study_container">
        <div class="study">
          <div class="study_head">
            <h3>Study</h3>
            <img src="/images/icon-ellipsis.svg" class="elips" alt="">
          </div>
          
          <div class="study_content">
            <h1 class="hours">0hrs</h1>
            <p class="last-time">Select TIme Tracking</p>
          </div>
        </div>
      </div>

      <div class="exercise_container">
        <div class="exercise">
          <div class="exercise_head">
            <h3>Exercise</h3>
            <img src="/images/icon-ellipsis.svg" class="elips" alt="">
          </div>
          
          <div class="exercise_content">
            <h1 class="hours">0hrs</h1>
            <p class="last-time">Select TIme Tracking</p>
          </div>
        </div>
      </div>

      <div class="social_container">
        <div class="social">
          <div class="social_head">
            <h3>Social</h3>
            <img src="/images/icon-ellipsis.svg" class="elips" alt="">
          </div>
          
          <div class="social_content">
            <h1 class="hours">0hrs</h1>
            <p class="last-time">Select TIme Tracking</p>
          </div>
        </div>
      </div>

      <div class="self_care_container">
        <div class="self_care">
          <div class="self_care_head">
            <h3>Self Care</h3>
            <img src="/images/icon-ellipsis.svg" class="elips" alt="">
          </div>
          
          <div class="self_care_content">
            <h1 class="hours">0hrs</h1>
            <p class="last-time">Select TIme Tracking</p>
          </div>
        </div>
      </div>

    </div>

為什么它不起作用？

uj5u.com熱心網友回復：

要了解您做錯了什么，您首先需要了解Javascript 陣列是什么。您很可能已經知道什么是變數：

var foo = 1;

console.log(foo); // returns "1"

陣列就像變數的集合：

var foo = [1, 2, 3];

console.log(foo); // returns "array (1, 2, 3)"
console.log(foo[0]); // returns "1"
console.log(foo[1]); // returns "2"

您可能也已經知道，計算機從 0 開始計數，而人類從 1 開始計數。因此，要從陣列中獲取第一個值foo，您需要呼叫鍵 0 foo[0]。

陣列對每個值（元素）使用唯一的鍵（索引）。要獲取值，請使用密鑰。

現在讓我們看看你的代碼：

const hoursTime = document.getElementsByClassName('hours');

這將回傳：

hoursTime = [Element, Element, Element, Element, Element, Element]

如果您嘗試申請onclick，hoursTime您最終會這樣做：

Array.onclick();

顯然 Javascript 不明白這一點。您不能單擊陣列。但是，您可以單擊元素！但是，如上所述，您需要從該陣列中取出這些元素。

您可以在技術上手動執行此操作：

hoursTime[0].onclick = function();
hoursTime[1].onclick = function();

顯然這很不方便。當您想在陣列中的每個元素上放置相同的函式時，它需要撰寫大量代碼。

這就是回圈的用武之地。回圈只是遍歷陣列中的每個值。有幾種方法可以做到這一點。一種是計算陣列的長度并對其進行回圈：

var foo = [1, 2, 3];

// Start at 0, check if the number is still smaller than the length of the array and if so, run the code and add a number
for(var i = 0; i < foo.length; i  ){
    console.log(foo[i]); // First returns 0, then 1, then 2
}

forEach是遍歷陣列的另一種方式。不同之處在于您不必自己計算陣列的長度。這使您對回圈的控制更少。與上述方法一樣，如果您愿意，可以跳過一個數字。forEach你不能那樣做。

var foo = [1, 2, 3];

foo.forEach(function(element, index){
    console.log("Found value: " element " at key(index): " index);
});

因此，要使您的代碼正常作業，您需要遍歷陣列并將 onclick 事件應用于其中的每個元素：

const hoursTime = document.getElementsByClassName('hours');

for(let i = 0; i < hoursTime.length; i  ){
    hoursTime[i].onclick = function();
}

// or

hoursTime.forEach(function(element){
    element.onclick = function();
});

uj5u.com熱心網友回復：

實際上querySelectorAll選擇正確的元素并回傳一個 NodeList（元素陣列）

如果要將事件添加到元素陣列中，則必須使用loop. 您可以使用forEach例如

function fn() {
    this.innerHTML = 'clicked'
}
document.querySelectorAll('.hours').forEach(e => e.addEventListener('click', fn))

標籤：javascript 表现 dom dom 事件 javascript 对象

上一篇：dom串列呈現不需要的逗號或引號

下一篇：通過JavaScriptDom動態追加元素