时间戳

首页 > 解决方案 > 使用 jQuery 和 CSS 选择器计算元素

javascript - 使用 jQuery 和 CSS 选择器计算元素

问题描述

我有 8 个按钮，我想用 class 计算每个按钮的总数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> ```

标签： javascriptjquery

解决方案

正如您的代码显示您正在使用 jQuery ( $("#amountInDollars").html(...))，我将举一个使用 jQuery 的示例，因为它似乎已被加载。我已经为按钮添加了一个单击处理程序，因此当它们被单击类时，它们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>

推荐阅读