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

uj5u.com熱心網友回復：

由于您的代碼顯示您正在使用 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>

uj5u.com熱心網友回復：

首先，我認為添加類名沒有任何意義，desactivate因為每個非活動按鈕都是自然停用的，價格跨度元素應該只有類名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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/339754.html

標籤：javascript 查询

上一篇：如何自動向新卡中克隆的單選按鈕添加新名稱

下一篇：洗掉每個函式中的重復項