Question

我想创建一个带有送货系统的产品付款页面。但我不知道如何计算javascript或jquery中的其他，我也不知道如何在javascript中使用％（parcentage）。

这里有谁能帮助我对此有所了解？我是javascript的新手。所以请在给予否定投票之前帮助我。如果你觉得它很容易那么请给我一些想法或例子。我尝试在google，stackoverflow和jsfiddle上搜索。

这是我想要的想法吗？

Food + DHL = Shipment cost 3%
Food + Fedex = Shipment cost 2.5%
Food + Post = Shipment cost 0.2%

Furnitures + DHL = shipment cost 4%
Furnitures + FedEx = shipment cost 2%
Furnitures + Post = shipment cost 1%

Cars + DHL = Shipment cost 5%
Cars + FedEx = Shipment 6%
When select cars, post option will be disable and can't be selected. 

When select Computers, DHL option will be disable and can't be selected. 
When select Computers, FedEx option will be disable and can't be selected.
Computers + Post = Shipment cost 3%

我如何使用javascript或jquery应用这些费用？当用户在字段上输入金额时。

    <form action="payment.php">
    <label>Please select your product type</label>
    <select name="product-type" id="ptype">
    <option value="Food">Food</option>
    <option value="Furnitures">Furnitures</option>
    <option value="Cars">Cars</option>
    <option value="Computers">Computers</option>
    </select>

    <label>Shipment System</label>
    <select name="shipment" id="shipment">
    <option value="DHL">DHL (4-5 days)</option>
    <option value="FedEx">FedEx (4-5 days)</option>
    <option value="Post">Regular Post (15-30 days)</option>
    </select>

    <label>Amount</label>
    <input type="text" name="amount" id="price">

    <!-- here I want to put amount of money. its will be use for shipment costing. -->

    <label>Shipment Cost</label>
    <span class="text_decoration" id="shipment_cost">0</span>% 
    <!-- I think here will be automatically added shipment %, when user select product type and shipment system. -->

    <!-- Shipment cost % automatically added with total price. so total price will be amount + shipment cost. -->

    <label>Total Price</label>
    $<span class="text_decoration" id="total_price">0</span>

    <button id="payment" name="submit">Confirm & Pay</button>

    </form>

有可能吗？任何简单的方法？我真的是新手，想要从所有高级和javascript天才中学习。请帮助我学习和使用js。

Answer 1

好的，所以这似乎是实现这一目标的方法。它不可能禁用/隐藏选项（除非我们愿意花很长时间才能实现这一点）我已经做到了这样，如果没有可用的复合对，则发出警报。

您可以看到我在json中如何成对，只需添加null作为您不想存在的对的值。

（当然，您需要包含jquery.min.js文件。）

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
var fees    =   { "food_dhl": 3, "food_fedex": 2.5, "food_post": 0.2, "furnitures_dhl": 4, "furnitures_fedex" : 2, "furnitures_post" : 1, "cars_dhl" : 5, "cars_fedex" : 6, "cars_post" : null, "computers_post" : 3 };

function _shipment_fee() {
    var product =   $("#ptype").val();
    var shipment    =   $("#shipment").val();
    var amount  =   parseFloat($("#price").val());
    var fee =   fees[product.toLowerCase()+"_"+shipment.toLowerCase()];
    var fee_amount;

    if(shipment.length  >=  2   &&  product.length  >=  2) {
        if(fee !== null && fee !== undefined) {
            fee =   parseFloat(fee);
            fee_amount  =   (fee/100)*amount;

            $("#shipment_cost").html(fee_amount);
            $("#total_price").html(parseFloat((amount-fee_amount)));
        } else {
            alert(shipment + " option is not available with " + product);
            $("#shipment_cost").html("0.00");
            $("#total_price").html("0");
        }
    }

}
</script>
  <form action="payment.php">
    <label>Please select your product type</label>
    <select name="product-type" id="ptype" onchange="_shipment_fee();">
    <option value="" selected></option>
    <option value="Food">Food</option>
    <option value="Furnitures">Furnitures</option>
    <option value="Cars">Cars</option>
    <option value="Computers">Computers</option>
    </select>

    <label>Shipment System</label>
    <select name="shipment" id="shipment" onchange="_shipment_fee();">
    <option value="" selected></option>
    <option value="DHL">DHL (4-5 days)</option>
    <option value="FedEx">FedEx (4-5 days)</option>
    <option value="Post">Regular Post (15-30 days)</option>
    </select>

    <label>Amount</label>
    <input type="text" name="amount" onchange="_shipment_fee();" id="price">

    <!-- here I want to put amount of money. its will be use for shipment costing. -->

    <label>Shipment Cost</label>
    <span class="text_decoration" id="shipment_cost">0</span>$
    <!-- I think here will be automatically added shipment %, when user select product type and shipment system. -->

    <!-- Shipment cost % automatically added with total price. so total price will be amount + shipment cost. -->

    <label>Total Price</label>
    $<span class="text_decoration" id="total_price">0</span>

    <button id="payment" name="submit">Confirm & Pay</button>

    </form>

使用javascript或jquery计算运费佣金

1 个答案: