Question

我试图阻止价格。单价取决于单位数量。例如：

Quantity — Price for each
1____________________$110
10___________________$105
20___________________$100
...
Number of items:__
Total:
Price for each:

需要写一个文本字段，用户输入的项目数量，一切都在重新计算和即时汇总。

以下是我对此任务的认识：

var price1 = 110,
  price2 = 105,
  price3 = 100,
  qty1 = 1,
  qty2 = 10,
  qty3 = 20;

function conversion(val) {
  var div = document.getElementById("div"),
    price = document.getElementById("price");
  if (isNaN(val)) {
    div.innerHTML = "";
    price.innerHTML = "";
  } else {
    switch (true) {
      case (val <= 0):
        {
          div.innerHTML = "";
          price.innerHTML = "";
          break;
        }
      case (val >= qty1 && val < qty2):
        {
          div.innerHTML = val * price1;
          price.innerHTML = price1;
          break;
        }
      case (val >= qty2 && val < qty3):
        {
          div.innerHTML = val * price2;
          price.innerHTML = price2;
          break;
        }
      case (val >= qty3):
        {
          div.innerHTML = val * price3;
          price.innerHTML = price3;
          break;
        }
    }
  }
}

<div>
  Quantity — Price for each
</div>
<div>
  <div>1 — $110</div>
  <div>10 — $105</div>
  <div>20 — $100</div>
</div>
<div>
  Number of items:
  <div>
    <input id="txt" onblur="conversion(this.value)" onchange="conversion(this.value)" onkeypress="conversion(this.value)" onkeyup="conversion(this.value)" type="number">
  </div>
</div>
<div>
  Total:
  <div id="div"></div>
</div>
<div>
  Price for each:
  <div id="price"></div>
</div>

如何正确实施，考虑到数量和单价的线可以从1到无穷大（值是从数据库中获取的）？

我认为可以在data-atributes中记录价格和数量，并用JS解析它。像这样：

...
<div data-quantity="10" data-price="105">
  <span class="quantity">10</span>
  <span class="price">105</span>
</div>
...

谢谢！

Answer 1

使用data属性确实是一个解决方案：

＆＃13;

console.log(document.getElementById("test").dataset)

＆＃13;

<div data-quantity="10" data-price="105" id="test">
  <span class="quantity">10</span>
  <span class="price">105</span>
</div>

＆＃13;

它是not fully compatible with previous IE version，所以要小心。

但我建议您寻找一种方法将计算从DOM移开，以加快计算速度。

例如，将数据解析为JavaScript对象并进行计算可以节省一些DOM跳转速度，从而加快速度：

＆＃13;

console.clear();
//markup for product
function Product(name) {
	return {
        //Name of product
		name : name,
        //List of price ranges (populated later)
		prices : [
		],
        //method for adding a price
		newPrice : function newPrice(quantity, cost) {
            //Push new price unto list
			this.prices.push({
				quantity : quantity,
				cost : cost
			});
            //Sort list
			this.prices = this.prices.sort(function (a, b) {
					return a.quantity - b.quantity
				});
		},
        //Get the price for a variable quantity of this product
		get : function (quantity) {
			//Loop through prices to find the most matching
			var price = 0;
			for (var i = 0; i < this.prices.length; i++) {
				if (this.prices[i].quantity <= quantity) {
					price = this.prices[i].cost;
				} else {
					break;
				}
			}
			console.log('price per unit:', price, 'price for all', quantity, 'units:', price * quantity)
		}
	};
} //Make an instance
var myHotProduct = new Product('Fancy pants');
//Add some prices
myHotProduct.newPrice(0, 110);
myHotProduct.newPrice(10, 105);
myHotProduct.newPrice(20, 100);
//get some quantities
myHotProduct.get(0);
myHotProduct.get(1);
myHotProduct.get(9);
myHotProduct.get(10);
myHotProduct.get(19);
myHotProduct.get(20);
//Log everything we know about our product
console.log(myHotProduct);

＆＃13;

现在，您可以将价格作为数组获取，并在data-的限制之外修改它们。

根据数量计算物品的价格

1 个答案: