[英]Unable to select closest h2 element using JavaScript
我希望能夠選擇最接近包含披薩選擇選項的字段集的h2標題,並使用jQuery設置標題文本。 到目前為止,我一直做不到。
HTML:
<div id="pizzaForm">
<fieldset>
<form class="pure-form">
<legend>Pizza</legend>
<label><b>Pizza Type: </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: </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): </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 id="cost" style= "float:left; margin-top:-3cm; margin-left: 9cm; border: solid black 2px; padding: 5px"> TEST </h2>
<br>
</div>
JS:
$(document).on("change","#pizzaSize", function() {
$("input[type='checkbox']").prop('disabled', false);
var selectionPrice = $('option:selected', this).attr('data-price');
var selectionInt = parseFloat(selectionPrice, 10);
pizzaCost = selectionInt;
$(this).closest('h2').text(pizzaCost);
calculateCost(pizzaCost, toppingCost, sideCost, drinkCost, desertCost, desertSizeCost, drinkSizeCost, sideSizeCost);
});
closest()
只會為您的控件獲取字段集。 如果您知道h2在相同級別的字段集之后,則可以執行以下操作:
$(this).closest('fieldset').nextAll('h2').first();
但這取決於您對“最接近”的意思。 您可能想看看jQuery 樹遍歷函數 。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.