Question

每次用户点击“添加披萨”时，按钮，我希望页面生成另一个比萨饼形式，并添加额外的比萨饼的任何费用。我已经能够添加披萨形式，但没有任何添加规则应用于克隆元素。有什么想法吗？

HTML：

    <div id="pizzaForm">
        <fieldset>
            <form class="pure-form">
            <legend>Pizza</legend>
            <label><b>Pizza Type: &nbsp;</b></label>
            <select id="pizza">
                <option name="margarita">Margarita</option>
                <option name="deep-pan">Deep Pan</option>
                <option name="stuffed-crust">Stuffed Crust</option>
            </select>
                <span style="float:right">
                <label><b>Pizza Size: &nbsp;</b></label>
                <select id="pizzaSize">
                    <option name="e-small" id="4.99">Extra Small - £4.99</option>
                    <option name="small" id="5.99">Small - £5.99</option>
                    <option name="medium" id="6.99">Medium - £6.99</option>
                    <option name="large" id="8.99">Large - £8.99</option>
                    <option name="e-large" id="9.99">Extra Large - £9.99</option>
                    <option name="f-size" id="10.99">Family Size - £10.99</option>
                </select>
                </span>
            </form>
        </fieldset>
        <fieldset style = "border-top:0px">
        <form class="pure-form">
            <legend><b>Toppings (99p Each): &nbsp;</b></legend>
            <input type="checkbox" name="onions" id="0.99">Onions</input>
            <input type="checkbox" name="mushrooms" id="0.99">Mushrooms</input>
            <input type="checkbox" name="peppers" id="0.99">Peppers</input>
            <input type="checkbox" name="olives" id="0.99">Olives</input>
            <input type="checkbox" name="garlic" id="0.99">Garlic</input>
            <input type="checkbox" name="peperoni" id="0.99">Peperoni</input>
            <input type="checkbox" name="cheese" id="0.99">Pesto</input>
        </form>
        </fieldset>
        <br>
    </div>
    <div id="extraPizza"></div>
    <center><button id="addPizza"> Add Pizza </button></center>

JavaScript的：

var pizzaCost = 0.00;
var toppingCost = 0.00;
var sideCost = 0.00;
var drinkCost= 0.00;
var desertCost = 0.00;
var desertSizeCost = 0.00;
var drinkSizeCost = 0.00;
var sideSizeCost = 0.00;

$("#pizzaSize").prop('disabled', true);

$("#pizza").change(function() {
    $("#pizzaSize").prop('disabled', false);
})

$( "#pizzaSize" ).change(function() {
    $("input[type='checkbox']").prop('disabled', false);
    var selectionPrice = $('option:selected', this).attr('id');
    var selectionInt = parseFloat(selectionPrice, 10);
    pizzaCost = selectionInt;
    calculateCost(pizzaCost, toppingCost, sideCost, drinkCost, desertCost, desertSizeCost, drinkSizeCost, sideSizeCost);
});

$('input[type=checkbox]').change(function(){
    var checked = $(":checkbox:checked").length;
    toppingCost = 0.99 * checked;
    calculateCost(pizzaCost, toppingCost, sideCost, drinkCost, desertCost, desertSizeCost, drinkSizeCost, sideSizeCost);
});

function calculateCost(pizzaCost, toppingCost, sideCost, drinkCost, desertCost, desertSizeCost, drinkSizeCost, sideSizeCost) {
    var total = pizzaCost + toppingCost + sideCost + drinkCost + desertCost + desertSizeCost + drinkSizeCost + sideSizeCost;
    $("#totalPrice").text(total.toFixed(2));
}

$( "#addPizza" ).click(function() {
  $("#pizzaForm").clone().appendTo("#extraPizza");
});

Answer 1

在注册事件时应该使用jQuery on委托，以便它可以用于动态创建和注入的表单元素。

$(document).on("change","#pizzaSize", function() {
    $("input[type='checkbox']").prop('disabled', false);
    var selectionPrice = $('option:selected', this).attr('id');
    var selectionInt = parseFloat(selectionPrice, 10);
    pizzaCost = selectionInt;
    calculateCost(pizzaCost, toppingCost, sideCost, drinkCost, desertCost, desertSizeCost, 
                                                             drinkSizeCost, sideSizeCost);
});

此外，我发现您的代码存在一些问题。首先，您不应该在表单元素上保留Id，因为您正在制作克隆。此外，您不应使用Id使用jQuery选择来绑定事件。不超过一个元素应具有相同的Id。在元素上保留一些css类，您可以使用它来注册您的点击事件代码。也不要将价格保留在id属性值中。如果2件商品价格相同怎么办？相同的ID？这是不正确的。您应该将价格保留在HTML 5数据属性中。

您可以使用closest()方法转到父容器，然后使用find获取相对大小下拉列表的引用。

$(document).on("change", ".pizza", function () {
    var _this = $(this);
    _this.closest("fieldset").find(".size").prop('disabled', false);

});

Here是我提到的更改的工作示例。

将javascript规则应用于克隆元素

1 个答案: