將 javascript 應用於多個 div

Question

我有這樣的 JavaScript/HTML 代碼：

 const priceDiv = document.querySelector('#pprices'); priceDiv.textContent = (+priceDiv.textContent).toLocaleString('en-US');

 <div id="pprices">125135135</div> <div id="pprices">1361436136</div> <div id="pprices">136136136136</div>

問題是 JavaScript 代碼僅影響第一個 div。

我怎么解決這個問題？

Answer 1

1. ID 應該是唯一的。 請改用class 。
2. querySelector返回第一個匹配元素。 請改用querySelectorAll 。
3. querySelectorAll返回一個 NodeList object 所以使用forEach方法循環遍歷列表。

 const priceDiv = document.querySelectorAll('.pprices'); priceDiv.forEach(e => { e.textContent = (+e.textContent).toLocaleString('en-US'); })

 <div class="pprices">125135135</div> <div class="pprices">1361436136</div> <div class="pprices">136136136136</div>

Answer 2

你需要querySelectorAll和 class 而不是 ids 和forEach來傳遞所有元素

 const priceDivs = document.querySelectorAll('.pprices'); priceDivs.forEach(function (priceDiv) { priceDiv.textContent = (+priceDiv.textContent).toLocaleString('en-US'); });

 <div class="pprices">125135135</div> <div class="pprices">1361436136</div> <div class="pprices">136136136136</div>