Question

我一直试图为客户制作一个在线表格，以便选择他们想要的菜肴以及它应该有多少人。但是我在使用Javascript时遇到了一些麻烦。

我的想法是做这样的事情：

如果盘子被检查
然后获取下拉菜单的值
计算每道菜的总数
为每一道菜做到这一点
然后在('The script is called:', 'python_args_test.py') ('Your first variable is:', '4') ('Your second variable is:', '5') ('Your third variable is:', '6')函数中我将所有小计的总和

calculateTotal()

function priceDish1() {
  var quantity = 0;
  var totalPriceDish1 = 0;
  var dishPrice = 19;
  var quantity = document.getElementById("quantityDish1").value;
  var theDish1 = document.getElementById("dish1");

  if (theDish1.checked == true) {
    totalPriceDish1 = quantity * dishPrice;
  }

  return totalPriceDish1;
}

function priceDish2() {
  var quantity = 0;
  var totalPriceDish1 = 0;
  var dishPrice = 19;
  var quantity = document.getElementById("quantityDish1").value;
  var theDish1 = document.getElementById("dish1");

  if (theDish1.checked == true) {
    totalPriceDish1 = quantity * dishPrice;
  }
  return totalPriceDish1;
}

function calculateTotal() {
  var theTotalPrice = totalPriceDish1() + totalPriceDish2();
  document.getElementById('totalPrice').innerHTML = "Total $" + theTotalPrice;

}

提前致谢!!

Answer 1

这是我的版本。它工作（如果我得到你想要的正确）但注意它没有经过适当的测试。可能还存在与跨浏览器兼容性相关的一些问题。而Derek在评论中所写的内容也很重要。所以，从下面的代码中你可以采取所有方法和复选框魔术（我的意思是不要复制它 - 自己调整它）：

 function getDishPrice(dish) {
     var quantity = dish.lastChild.lastChild.value ? dish.lastChild.lastChild.value : 0,
         price = dish.dataset.price ? dish.dataset.price : 0;
     return dish.firstChild.checked ? quantity * price : 0;
 }

function calculateTotal() {
    var dishes = Array.prototype.slice.call(document.querySelectorAll(".dishes")),
        total = 0;
    dishes.filter(function(dish) {
        return dish.firstChild.checked;
    }).forEach(function(dish) {
        total += getDishPrice(dish);
    });    
    document.getElementById('totalPrice').textContent = "Total: $" + total;
}
var selects = document.getElementsByTagName("select"),
    inputs = document.getElementsByTagName("input"),
    i;
for (i = 0; i < selects.length; i++) {
    selects[i].addEventListener('change', calculateTotal, false);
    inputs[i].addEventListener('change', calculateTotal, false);
}

#priceForm label {
  display: block;
}
#priceForm label div {
  display: none;
}
#priceForm label input[type="checkbox"]:checked + div {
  display: block;
}

<div id="div">
    <form action="" id="priceForm" >
            <label class="dishes" data-price="10"><input type="checkbox" id="dish1"> Dish Name 1 <div>Number of Dishes
                <select id="quantityDish1">
                    <option class="quantDish1" value="0">0</option>
                    <option class="quantDish1" value="1">1</option>
                    <option class="quantDish1" value="2">2</option>
                    <option class="quantDish1" value="3">3</option>
                    <option class="quantDish1" value="4">4</option>
                    <option class="quantDish1" value="5">5</option>
                    <option class="quantDish1" value="6">6</option>
                    <option class="quantDish1" value="7">7</option>
                    <option class="quantDish1" value="8">8</option>
                    <option class="quantDish1" value="9">9</option>
                    <option class="quantDish1" value="10">10</option>
                </select></div></label>
                
            <label class="dishes" data-price="20"><input type="checkbox" id="dish2"> Dish Name 2 <div>Number of Dishes
                <select id="quantityDish2">
                    <option class="quantDish2" value="0">0</option>
                    <option class="quantDish2" value="1">1</option>
                    <option class="quantDish2" value="2">2</option>
                    <option class="quantDish2" value="3">3</option>
                    <option class="quantDish2" value="4">4</option>
                    <option class="quantDish2" value="5">5</option>
                    <option class="quantDish2" value="6">6</option>
                    <option class="quantDish2" value="7">7</option>
                    <option class="quantDish2" value="8">8</option>
                    <option class="quantDish2" value="9">9</option>
                    <option class="quantDish2" value="10">10</option>
                    </select></div></label>
    </form>
</div>
<p id="totalPrice">Total: $0</p>

实时计算 - Javascript中的购物车

1 个答案: