javascript - 选择最接近克隆元素的 h2 标题

Question

这个问题已经有答案了:

Unable to select closest h2 element using JavaScript (1 个回答)

已关闭 7 年前。

我创建了一个披萨表单，用户可以在其中选择一个披萨，然后根据需要将另一个披萨添加到订单中(通过克隆原始披萨表单)。每个披萨的成本显示在表单旁边的 h2 标题中。

问题:如果用户选择他们想要的披萨，然后单击添加披萨按钮，则前一个披萨的价格会自动放入新的 h2 标题中(即使用户没有'尚未选择第二个披萨)。

如何删除新克隆的 h2 标题中的文本？

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" data-price="4.99">Extra Small - £4.99</option>
                    <option name="small" data-price="5.99">Small - £5.99</option>
                    <option name="medium" data-price="6.99">Medium - £6.99</option>
                    <option name="large" data-price="8.99">Large - £8.99</option>
                    <option name="e-large" data-price="9.99">Extra Large - £9.99</option>
                    <option name="f-size" data-price="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">Onions</input>
            <input type="checkbox" name="mushrooms">Mushrooms</input>
            <input type="checkbox" name="peppers" >Peppers</input>
            <input type="checkbox" name="olives" >Olives</input>
            <input type="checkbox" name="garlic" >Garlic</input>
            <input type="checkbox" name="peperoni" >Peperoni</input>
            <input type="checkbox" name="cheese" >Pesto</input>
        </form>
        </fieldset>
        <h2 style= "float:left; margin-top:-3cm; margin-left: 9cm; border: solid black 2px; padding: 5px"> £0.00 </h2>
        <br>
    </div>
    <div id="extraPizza"></div>
    <center><button id="addPizza"> Add Pizza </button></center>

JS:

$(document).on("change","#pizzaSize", function() {
    var selectionPrice = $('option:selected', this).attr('data-price');
    var selectionInt = parseFloat(selectionPrice, 10);
    pizzaCost = selectionInt;
    $(this).closest('fieldset').nextAll('h2').first().text("£" + pizzaCost);
});

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

Answer 1

h2 位于您的克隆元素内。因此，请使用 find()。

$( "#addPizza" ).click(function() {

  var c=$("#pizzaForm").clone();  
  c.find("h2").html("");
  c.appendTo("#extraPizza");

});