使用 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>