将javascript规则应用于克隆的元素

Applying javascript rules to cloned element

本文关键字：元素 应用于 javascript 规则      更新时间：2023-09-26

每次用户单击"添加披萨"按钮时，我都希望页面生成另一个披萨表单，并添加额外披萨的任何成本。我已经能够添加一个pizza表单，但没有任何添加规则应用于克隆的元素。有什么想法吗？

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

在注册事件时，应该使用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，因为您正在进行克隆。此外，您不应该使用jQuery selection使用Id来绑定事件。不应该有多个元素具有相同的Id。在元素上保留一些css类，您可以使用这些类来注册单击事件代码。也不要将价格保留在id属性值中。如果两件商品的价格相同怎么办？相同的Id？这是不对的。您应该将价格保留在HTML5数据属性中。

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

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

这是一个带有我提到的更改的工作示例。

相关文章：