Jquery 折扣计算范围

Question

我有一个产品，它的价格是 10 美元。如果顾客购买 11 个这个产品，价格是 9 美元，如果他购买 21 个，价格是 8 美元。 iki tane array var whole_sell_qty ve whole_sell_price。我应该如何开发一个算法，当产品数量为11时，将价格乘以$ 9并打印在总面积上。

var whole_sell_qty = [10, 20, 30];
var whole_sell_price = [10, 9, 8];
$(".quantity").bind('keyup mouseup', function () {
   $("#total").text($("#price").val() * $(".quantity").val());
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<style>
table, th, td, tr {
  border: 1px solid black;
}
</style>

<label>Product name : shoe</label><br>

<label>Product price : </label><input type="number" id="price" value="10" disabled><span>$</span><br>

<label>Qty : </label> <input type="number" name="quantity" class="quantity" value="1"/><br>

<label>Total : <span id="total"></span></label>
<table>
<thead>
<tr>
<th>qty range</th>
<th>unit price</th>
</tr>
</thead>
<tbody>
<tr>
<td>1-10</td>
<td>$ 10</td>
</tr>
<tr>
<td>11-20</td>
<td>$ 9</td>
</tr>
<tr>
<td>21-30</td>
<td>$ 8</td>
</tr>
</tbody>
</table>

Answer 1

试试这个：

var whole_sell_qty = [10, 20, 30];
var whole_sell_price = [10, 9, 8];
$(".quantity").on('change', function () {
   var sell_value = get_round_up_ten($(this).val());
  var sell_key = whole_sell_qty.indexOf(sell_value);
  console.log("sell price: " + whole_sell_price[sell_key]);
});

var get_round_up_ten = function(val) {
  return Math.ceil(val / 10) * 10;
}

Answer 2

对于您的示例（whole_sell_qty 的元素已排序且值均匀分布）您可以像这样获取 whole_sell_price 中元素的索引：

let qty = $(".quantity").val();
let index = Math.floor( (qty-1)/10 );
if(index < 0) {
    index = 0;
} else if(index > whole_sell_qty.length-1) {
    index = whole_sell_qty.length - 1;
}

如果 whole_sell_qty 中的元素没有均匀分布，那么您可以创建一个函数来计算给定数量的正确价格：

function setPrice() {
    let qty = $(".quantity").val();
    let length = whole_sell_qty.length;
    
    for(let i=0; i < length; i++) {
        if(qty > whole_sell_qty[i])
            continue;
    
        $("#total").text(qty * whole_sell_price[i]);
        return;
    }
    $("#total").text(qty * whole_sell_price[length-1]);
}

注意： 这两种解决方案都假定您的两个数组 whole_sell_qty 和 whole_sell_price 在相同的索引中具有匹配的元素。如果不是这种情况，您可以考虑使用一个对象来表示不同的数量及其各自的价格。

试试看：

注意：我将 min 属性添加到 input[type="number"] 元素，因此您无法通过单击获得小于 0 的值。但是您仍然可以在文本域。为此，我没有在此处提供解决方案，但您可以查看如何处理 here.

var whole_sell_qty = [10, 20, 30];
var whole_sell_price = [10, 9, 8];

$(".quantity").on('click', function () {
    let qty = $(".quantity").val();
    // this will get the correct price index for whole_sell_price based on qty
    let index = Math.floor( (qty-1)/10 );

    if(index < 0) {
        index = 0;
    } else if(index > whole_sell_qty.length-1) {
        index = whole_sell_qty.length - 1;
    }
    
    $("#total").text(qty * whole_sell_price[index]);
});

table, th, td, tr {
  border: 1px solid black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

<label>Product name : shoe</label><br>
<label>Product price : </label><input type="number" id="price" value="10" disabled><span>$</span><br>
<label>Qty : </label> <input type="number" name="quantity" min="0" class="quantity" value="0"/><br>
<label>Total : <span id="total">0</span></label>

<table>
<thead>
  <tr>
    <th>qty range</th>
    <th>unit price</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>1-10</td>
    <td>$ 10</td>
  </tr>
  <tr>
    <td>11-20</td>
    <td>$ 9</td>
  </tr>
  <tr>
    <td>21-30</td>
    <td>$ 8</td>
  </tr>
</tbody>
</table>

Jquery 折扣计算范围

Jquery discount calculation from range

javascript

jquery

range

discount

price