范围内的 Jquery 折扣计算答案

【问题标题】：Jquery discount calculation from range范围内的 Jquery 折扣计算
【发布时间】：2021-03-18 00:01:54
【问题描述】：

我有一个产品，它的价格是 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>

【问题讨论】：

向我们展示您的尝试。 SO 不是免费的代码编写服务。此处的目的是让您发布解决自己问题的尝试，并在其他人无法按预期工作时提供帮助。见How to Ask 和minimal reproducible example
.bind() 已被弃用多年，您应该使用.on()。

标签： javascript jquery range price discount

【解决方案1】：

对于您的示例（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>

【讨论】：

【解决方案2】：

试试这个：

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;
}

【讨论】：