使用 jQuery 和 CSS 選擇器計算元素

Question

我有 8 個按鈕，我想用active類計算每個按鈕的總數。

我嘗試了下面的代碼，但效果不佳。 誰能幫我解決這個問題？

 // Show Price function showPrice() { price = 0; btn1 = document.querySelector("#btn1"); btn2 = document.querySelector("#btn20"); btn3 = document.querySelector("#btn6"); btn4 = document.querySelector("#btn-book-20"); btn5 = document.querySelector("#btn-book-6"); btn6 = document.querySelector("#btn-book-12"); btn7 = document.querySelector("#btn-book-13"); if (btn1.getAttribute("class") == "active") { ele = document.querySelector("span #price").firstChild.textContent; price = price + Number(ele); } else if (btn2.getAttribute("class") == "active") { ele = document.querySelector("span #price2").firstChild.textContent; price = price + Number(ele); } else if (btn3.getAttribute("class") == "active") { ele = document.querySelector("span #price3").firstChild.textContent; price = price + Number(ele); } else if (btn4.getAttribute("class") == "active") { ele = document.querySelector("span #price4").firstChild.textContent; price = price + Number(ele); } else if (btn5.getAttribute("class") == "active") { ele = document.querySelector("span #price5").firstChild.textContent; price = price + Number(ele); } else if (btn6.getAttribute("class") == "active") { ele = document.querySelector("span #price6").firstChild.textContent; price = price + Number(ele); } else if (btn7.getAttribute("class") == "active") { ele = document.querySelector("span #price7").firstChild.textContent; price = price + Number(ele); } $("#amountInDollars").html(price); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button class="active" type="button" id="btn1"> <div> <span class="lg:text-base text-xs"> <p>Items 1</p> <br> <p id="users-number"></p> <span id="price">10</span> </span> </div> </button> <button class="desactivate" type="button" id="btn20"> <div> <span class="lg:text-base text-xs"> <p>Items 2</p> <br> <p id="users-number"></p> <span id="price2">20</span> </span> </div> </button> <button class="desactivate" type="button" id="btn6"> <div> <span class="lg:text-base text-xs"> <p>Items 3</p> <br> <p id="users-number"></p> <span id="price3">19</span> </span> </div> </button> <button class="desactivate" type="button" id="btn-book-6"> <div> <span class="lg:text-base text-xs"> <p>Items 4</p> <br> <p id="users-number"></p> <span id="price4">13</span> </span> </div> </button> <button class="desactivate" type="button" id="btn-book-20"> <div> <span class="lg:text-base text-xs"> <p>Items 5</p> <br> <p id="users-number"></p> <span id="price5">14</span> </span> </div> </button> <button class="desactivate" type="button" id="btn-book-12"> <div> <span class="lg:text-base text-xs"> <p>Items 6</p> <br> <p id="users-number"></p> <span id="price6">16</span> </span> </div> </button> <button class="desactivate" type="button" id="btn-book-13"> <div> <span class="lg:text-base text-xs"> <p>Items 7</p> <br> <p id="users-number"></p> <span id="price7">12</span> </span> </div> </button> <span id="amountInDollars"></span> ```

Answer 1

由於您的代碼顯示您正在使用 jQuery ( $("#amountInDollars").html(...) )，我將給出一個使用 jQuery 的示例，因為它似乎無論如何$("#amountInDollars").html(...)加載。 我在按鈕上添加了一個單擊處理程序，因此當它們被單擊時，類active和desactivate將被切換，因此您可以通過單擊來選擇哪個元素處於活動狀態。 如果您不需要這個處理程序，您可以刪除它，這只是為了使示例更加動態。 活動按鈕具有黃色背景。

對下面的注釋進行了編輯，即檢查是否沒有選擇按鈕和缺少價格。

 function showPrice() { var a = $('button.active').map((i,x) => $(x).find('span[id^=price]').first().text()).toArray(); var total = 0; if (a.length) total = a.reduce((p, n) => Number(p) + Number(n)); $("#amountInDollars").html(total); } // DOM ready for your actions $(function() { $('button').on('click', function() { $(this).toggleClass('active').toggleClass('desactivate'); showPrice(); }); showPrice(); });

 .active{background-color:yellow}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button class="active" type="button" id="btn1"> <div> <span class="lg:text-base text-xs"> <p>Items 1</p> <br> <p id="users-number"></p> <span id="price">10</span> </span> </div> </button> <button class="desactivate" type="button" id="btn20"> <div> <span class="lg:text-base text-xs"> <p>Items 2</p> <br> <p id="users-number"></p> <span id="price2">20</span> </span> </div> </button> <button class="desactivate" type="button" id="btn6"> <div> <span class="lg:text-base text-xs"> <p>Items 3</p> <br> <p id="users-number"></p> <span id="price3">19</span> </span> </div> </button> <button class="desactivate" type="button" id="btn-book-6"> <div> <span class="lg:text-base text-xs"> <p>Items 4</p> <br> <p id="users-number"></p> <span id="price4">13</span> </span> </div> </button> <button class="desactivate" type="button" id="btn-book-20"> <div> <span class="lg:text-base text-xs"> <p>Items 5</p> <br> <p id="users-number"></p> <span id="price5">14</span> </span> </div> </button> <button class="desactivate" type="button" id="btn-book-12"> <div> <span class="lg:text-base text-xs"> <p>Items 6</p> <br> <p id="users-number"></p> <span id="price6">16</span> </span> </div> </button> <button class="active" type="button" id="btn-book-13"> <div> <span class="lg:text-base text-xs"> <p>Items 7</p> <br> <p id="users-number"></p> <span id="price7">12</span> </span> </div> </button> <span id="amountInDollars"></span>

Answer 2

Firstable我看不出有什么目的添加類名desactivate原因各不激活鍵是天然desactive，價格跨度元素應該有一個類名price改為只ID的，並且可以使用事件委托做這些類型的東西，你可以使用 div 代替按鈕，但我沒有修改 HTML 的其余部分，這取決於您，編碼愉快 ;)。

編輯：添加按鈕點擊取消功能

 let total = 0; document.querySelector("#buttons").onclick = function(e) { // because you have elements inside of your button! so we count all the clicks on the button no matter what element is targeted let targetButton = e.target.closest("button"); if(targetButton) { let price = targetButton.querySelector(".price").textContent; // if the button is active then desactivate it and subtract the price from the total, else set the button as active and add the price to the total if(targetButton.className.includes("active")) { // set the button to inactive state targetButton.classList.remove("active"); total -= price; }else { // set the button to active state targetButton.classList.add("active"); total += Number(price); } // update the total amount element's content document.querySelector("#amountInDollars").textContent = total; } };

 .active { color: blue; }

 <div id="buttons"> <button type="button" id="btn1"> <div> <span class="lg:text-base text-xs"> <p>Items 1</p> <br> <p id="users-number"></p> <span class="price">10</span> </span> </div> </button> <button type="button" id="btn20"> <div> <span class="lg:text-base text-xs"> <p>Items 2</p> <br> <p id="users-number"></p> <span class="price">20</span> </span> </div> </button> <button type="button" id="btn6"> <div> <span class="lg:text-base text-xs"> <p>Items 3</p> <br> <p id="users-number"></p> <span class="price">19</span> </span> </div> </button> <button type="button" id="btn-book-6"> <div> <span class="lg:text-base text-xs"> <p>Items 4</p> <br> <p id="users-number"></p> <span class="price">13</span> </span> </div> </button> <button type="button" id="btn-book-20"> <div> <span class="lg:text-base text-xs"> <p>Items 5</p> <br> <p id="users-number"></p> <span class="price">14</span> </span> </div> </button> <button type="button" id="btn-book-12"> <div> <span class="lg:text-base text-xs"> <p>Items 6</p> <br> <p id="users-number"></p> <span class="price">16</span> </span> </div> </button> <button type="button" id="btn-book-13"> <div> <span class="lg:text-base text-xs"> <p>Items 7</p> <br> <p id="users-number"></p> <span class="price">12</span> </span> </div> </button> </div> <br> <span id="amountInDollars">0</span>