本文旨在解決JavaScript購物車數(shù)量增減功能僅對頁面中第一個(gè)元素生效的問題。通過分析常見錯(cuò)誤原因，並提供使用DOM遍歷和數(shù)據(jù)屬性的優(yōu)化方案，幫助開發(fā)者實(shí)現(xiàn)可複用的、簡潔高效的購物車數(shù)量控制功能。同時(shí)，本文還指出了原始HTML代碼中存在的一個(gè)無效結(jié)構(gòu)，並給出了修正建議。

在使用JavaScript開發(fā)購物車或其他需要動態(tài)控制數(shù)量的組件時(shí)，開發(fā)者常常會遇到一個(gè)問題：代碼只對頁面上的第一個(gè)元素生效，而對後續(xù)重複的元素?zé)o效。 這個(gè)問題通常源於對querySelector和querySelectorAll方法的不當(dāng)使用，以及事件監(jiān)聽器的綁定方式。

問題分析

原始代碼中使用querySelector來獲取頁面元素，這只會返回匹配選擇器的第一個(gè)元素。 即使使用了querySelectorAll，但後續(xù)的代碼仍然針對的是通過querySelector獲取的第一個(gè)元素，導(dǎo)致後續(xù)的元素?zé)o法響應(yīng)事件。 此外，為每個(gè)元素單獨(dú)編寫事件處理函數(shù)會造成代碼冗餘，不利於維護(hù)。

解決方案：利用DOM遍歷和數(shù)據(jù)屬性

一個(gè)更優(yōu)雅、更可維護(hù)的解決方案是使用DOM遍歷和數(shù)據(jù)屬性，將事件處理邏輯與特定的元素實(shí)例解耦。

1. 統(tǒng)一類名：為所有需要相同功能的元素使用相同的類名，例如，將所有“加號”按鈕都賦予pqt-plus類名，所有“減號”按鈕都賦予pqt-minus類名，用於顯示數(shù)量的元素賦予added類名，包含整個(gè)數(shù)量控制區(qū)域的div賦予pls-moins類名。

2. DOM遍歷：在事件處理函數(shù)中，使用e.target.closest()方法找到最近的父元素（例如，包含整個(gè)數(shù)量控制區(qū)域的div），然後通過querySelector()在該父元素範(fàn)圍內(nèi)查找需要操作的元素（例如，顯示數(shù)量的span）。

3. 數(shù)據(jù)屬性：使用data-*屬性在HTML元素上存儲額外的信息。 例如，可以在“加號”按鈕上設(shè)置data-inc="1"，在“減號”按鈕上設(shè)置data-inc="-1"，表示數(shù)量的增量。

代碼示例

以下是一個(gè)使用DOM遍歷和數(shù)據(jù)屬性的示例代碼：

 <div class="d-flex align-items-center pls-moins">
  <span class="count-number float-right">
    <button type="button" class="btn-sm left dec btn btn-outline-secondary pqt-minus" data-inc="-1">
      <i class="feather-minus"></i> -
    </button>
    <span class="cart-button">
      <span class="added">0</span>
    </span>
    <button type="button" class="btn-sm right inc btn btn-outline-secondary pqt-plus" data-inc="1">
      <i class="feather-plus"></i>  
    </button>
  </span>
</div>

<div class="d-flex align-items-center pls-moins">
  <span class="count-number float-right">
    <button type="button" class="btn-sm left dec btn btn-outline-secondary pqt-minus" data-inc="-1">
      <i class="feather-minus"></i> -
    </button>
    <span class="cart-button">
      <span class="added">0</span>
    </span>
    <button type="button" class="btn-sm right inc btn btn-outline-secondary pqt-plus" data-inc="1">
      <i class="feather-plus"></i>  
    </button>
  </span>
</div>

<div class="d-flex align-items-center pls-moins">
  <span class="count-number float-right">
    <button type="button" class="btn-sm left dec btn btn-outline-secondary pqt-minus" data-inc="-1">
      <i class="feather-minus"></i> -
    </button>
    <span class="cart-button">
      <span class="added">0</span>
    </span>
    <button type="button" class="btn-sm right inc btn btn-outline-secondary pqt-plus" data-inc="1">
      <i class="feather-plus"></i>  
    </button>
  </span>
</div>

<div class="d-flex align-items-center pls-moins">
  <span class="count-number float-right">
    <button type="button" class="btn-sm left dec btn btn-outline-secondary pqt-minus" data-inc="-1">
      <i class="feather-minus"></i> -
    </button>
    <span class="cart-button">
      <span class="added">0</span>
    </span>
    <button type="button" class="btn-sm right inc btn btn-outline-secondary pqt-plus" data-inc="1">
      <i class="feather-plus"></i>  
    </button>
  </span>
</div>

 document.querySelectorAll(".btn-sm").forEach(btn => {
  btn.addEventListener('click', e => {
    let total = e.target.closest('.pls-moins').querySelector('.added');
    total.textContent = Math.max(0, parseInt(total.textContent, 10) parseInt(e.currentTarget.dataset.inc, 10));
  });
});

這段代碼首先選取了所有類名為btn-sm的元素，然後為每個(gè)元素添加了一個(gè)點(diǎn)擊事件監(jiān)聽器。 在事件處理函數(shù)中，e.target指向觸發(fā)事件的元素（即被點(diǎn)擊的按鈕）。 e.target.closest('.pls-moins') 找到最近的父元素，該父元素包含了整個(gè)數(shù)量控制區(qū)域。 querySelector('.added') 在該父元素範(fàn)圍內(nèi)查找顯示數(shù)量的span元素。 最後，通過e.currentTarget.dataset.inc獲取按鈕上的data-inc屬性值，並更新數(shù)量。 Math.max(0, ...) 確保數(shù)量不會小於0。

HTML結(jié)構(gòu)注意事項(xiàng)

原始代碼中存在一個(gè)無效的HTML結(jié)構(gòu)：div元素不能直接放在span元素內(nèi)。 應(yīng)該將div替換為span或其他合適的元素，以確保HTML的有效性。 在上面的示例代碼中，已經(jīng)將包含數(shù)量的div元素替換為span元素。

總結(jié)

通過使用DOM遍歷和數(shù)據(jù)屬性，可以編寫出更簡潔、更可維護(hù)的JavaScript代碼，實(shí)現(xiàn)可複用的購物車數(shù)量控制功能。 避免使用querySelector直接選取多個(gè)重複元素，而是通過事件委託和DOM遍歷來操作相關(guān)的元素。 同時(shí)，注意HTML結(jié)構(gòu)的有效性，避免出現(xiàn)無效的嵌套。 這種方法不僅可以解決購物車數(shù)量增減功能僅對第一個(gè)元素生效的問題，還可以應(yīng)用於其他需要動態(tài)控制頁面元素的場景。

以上是JavaScript購物車數(shù)量增減功能：解決僅對第一個(gè)元素生效的問題的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！