javascript - 禁用包含相同属性的 div 标签

问题描述

我有两个具有不同 id 但具有相同属性的 div 标签，如下所示：第一个 div 标签：

<div id="espresso-option" class="option">
  <div class="container">
    <div class="type">
      <p>Type<p>
          <input type="radio" id="houseEspresso" name="type" checked="checked" onclick="addProduct(this)">
          <label for="houseEspresso">House Espresso</label><br>
          <input type="radio" id="guestEspresso" name="type" onclick="addProduct(this)">
          <label for="guestEspresso">Guest Espresso</label><br>
    </div>
    <div class="size">
      <p>Size<p>
          <input type="radio" id="single" name="size" value="25000" onclick="addProduct(this)">
          <label for="single">Single Espresso</label><br>
          <input type="radio" id="double" name="size" value="50000" checked="checked" onclick="addProduct(this)">
          <label for="double">Double Espresso</label><br>
    </div>
    <div class="extra">
      <p>Extras<p>
          <input type="radio" id="none" name="extra" value="0" checked="checked" onclick="addProduct(this)">
          <label for="milk">None</label><br>
          <input type="radio" id="hotmilk" name="extra" value="10000" onclick="addProduct(this)">
          <label for="hotmilk">Hot milk</label><br>
          <input type="radio" id="coldmilk" name="extra" value="10000" onclick="addProduct(this)">
          <label for="coldmilk">Cold milk</label><br>
          <input type="checkbox" id="chocolate" name="extra" value="10000" onclick="addProduct(this)">
          <label for="chocolate">Chocolate Dusting</label><br>
          <input type="checkbox" id="marshmallow" name="extra" value="10000" onclick="addProduct(this)">
          <label for="marshmallow">Marshmallows</label><br>
          <input type="checkbox" id="cream" name="extra" value="10000" onclick="addProduct(this)">
          <label for="cream">Whipped Cream</label><br>
    </div>
  </div>

  <div class="add-to-cart">
    <strong class="product-price-title">Price: </strong>
    <span class="product-price">0</span>
  </div>
  <button type="button" class="btn btn-cart">Add product</button>

</div>

第二个 div 标签：

<div id="cappuccino-option" class="option">
  <div class="container">
    <div class="type">
      <p>Type<p>
          <input type="radio" id="houseEspresso" name="type" checked="checked" onclick="addProduct(this)">
          <label for="houseEspresso">House Espresso</label><br>
          <input type="radio" id="guestEspresso" name="type" onclick="addProduct(this)">
          <label for="guestEspresso">Guest Espresso</label><br>
    </div>
    <div class="size">
      <p>Size<p>
          <input type="radio" id="small" name="size" value="30000" onclick="addProduct(this)">
          <label for="small">Small</label><br>
          <input type="radio" id="medium" name="size" value="45000" checked="checked" onclick="addProduct(this)">
          <label for="medium">Medium</label><br>
          <input type="radio" id="large" name="size" value="67500" checked="checked" onclick="addProduct(this)">
          <label for="large">Large</label><br>
    </div>
    <div class="extra">
      <p>Extras<p>
          <input type="radio" id="none" name="extra" value="0" checked="checked" onclick="addProduct(this)">
          <label for="milk">None</label><br>
          <input type="radio" id="hotmilk" name="extra" value="10000" onclick="addProduct(this)">
          <label for="hotmilk">Hot milk</label><br>
          <input type="radio" id="coldmilk" name="extra" value="10000" onclick="addProduct(this)">
          <label for="coldmilk">Cold milk</label><br>
          <input type="checkbox" id="chocolate" name="extra" value="10000" onclick="addProduct(this)">
          <label for="chocolate">Chocolate Dusting</label><br>
          <input type="checkbox" id="marshmallow" name="extra" value="10000" onclick="addProduct(this)">
          <label for="marshmallow">Marshmallows</label><br>
          <input type="checkbox" id="cream" name="extra" value="10000" onclick="addProduct(this)">
          <label for="cream">Whipped Cream</label><br>
    </div>
  </div>

  <div class="add-to-cart">
    <strong class="product-price-title">Price: </strong>
    <span class="product-price">0</span>
  </div>
  <button type="button" class="btn btn-cart">Add product</button>

</div>

我在这里尝试做的是我想使用 javascript 来计算不同产品的价格（例如：浓缩咖啡和卡布奇诺）并添加到购物车。当我单击选择第一个选项（第一个 div 标签）时，我希望它与第二个选项（第二个 div 标签）没有任何关系。这是我用于此功能的 javascript：

function addProduct(){
var size = document.getElementsByName("size");
var extra = document.getElementsByName("extra");
var priceOfProduct = 0;
var priceOfSize = 0;
var priceOfExtra = 0;

for (var i=0; i<size.length; i++){
    if(size[i].checked){
        priceOfSize = size[i].value
    }
}

for (var i=0; i<extra.length; i++){
    if(extra[i].checked){
        priceOfExtra += parseFloat(extra[i].value)
    }
}

priceOfProduct =+(priceOfSize) + +(priceOfExtra.toFixed(2))
document.getElementsByClassName("product-price")[0].innerText = priceOfProduct}

无论只有一种产品，此功能都运行良好。但是，当我添加一个或多个产品时，它似乎无法正常工作，因为当我使用“getElementsByName”时它具有相同的按钮名称。谁能给我一个关于这个问题的想法？我试图通过使用纯 HTML、css 和 javascript 来解决它。太感谢了！

标签： javascripthtmlcss

javascript - 禁用包含相同属性的 div 标签

问题描述

解决方案

推荐阅读