私はjavascriptとjqueryの初心者です。以下のスクリプトを作成しました。これは、追加したフォームでうまく機能しますが、最適化されていません。このスクリプトを最適化する方法を提案できる人はいますか? アドバイスをありがとう
$(function() {
// This button will increment the value
$('#delegates').change(function() {
$("#d_names p")
.slice(0)
.hide();
var currentVal = $('#delegates').val();
if (currentVal == 450) {
$("#d_names p")
.slice(0,-9)
.fadeIn();
$('#delegate2').attr('value', '');
$('#delegate3').attr('value', '');
$('#delegate4').attr('value', '');
$('#delegate5').attr('value', '');
$('#delegate6').attr('value', '');
$('#delegate7').attr('value', '');
$('#delegate8').attr('value', '');
$('#delegate9').attr('value', '');
$('#delegate10').attr('value', '');
$('#position2').attr('value', '');
$('#position3').attr('value', '');
$('#position4').attr('value', '');
$('#position5').attr('value', '');
$('#position6').attr('value', '');
$('#position7').attr('value', '');
$('#position8').attr('value', '');
$('#position9').attr('value', '');
$('#position10').attr('value', '');
} else if (currentVal == 900) {
$("#d_names p")
.slice(0, -8)
.fadeIn();
$('#delegate3').attr('value', '');
$('#delegate4').attr('value', '');
$('#delegate5').attr('value', '');
$('#delegate6').attr('value', '');
$('#delegate7').attr('value', '');
$('#delegate8').attr('value', '');
$('#delegate9').attr('value', '');
$('#delegate10').attr('value', '');
$('#position3').attr('value', '');
$('#position4').attr('value', '');
$('#position5').attr('value', '');
$('#position6').attr('value', '');
$('#position7').attr('value', '');
$('#position8').attr('value', '');
$('#position9').attr('value', '');
$('#position10').attr('value', '');
} else if (currentVal == 1350) {
$("#d_names p")
.slice(0, -7)
.fadeIn();
$('#delegate4').attr('value', '');
$('#delegate5').attr('value', '');
$('#delegate6').attr('value', '');
$('#delegate7').attr('value', '');
$('#delegate8').attr('value', '');
$('#delegate9').attr('value', '');
$('#delegate10').attr('value', '');
$('#position4').attr('value', '');
$('#position5').attr('value', '');
$('#position6').attr('value', '');
$('#position7').attr('value', '');
$('#position8').attr('value', '');
$('#position9').attr('value', '');
$('#position10').attr('value', '');
} else if (currentVal == 1800) {
$("#d_names p")
.slice(0, -6)
.fadeIn();
$('#delegate5').attr('value', '');
$('#delegate6').attr('value', '');
$('#delegate7').attr('value', '');
$('#delegate8').attr('value', '');
$('#delegate9').attr('value', '');
$('#delegate10').attr('value', '');
$('#position5').attr('value', '');
$('#position6').attr('value', '');
$('#position7').attr('value', '');
$('#position8').attr('value', '');
$('#position9').attr('value', '');
$('#position10').attr('value', '');
} else if (currentVal == 2250) {
$("#d_names p")
.slice(0, -5)
.fadeIn();
$('#delegate6').attr('value', '');
$('#delegate7').attr('value', '');
$('#delegate8').attr('value', '');
$('#delegate9').attr('value', '');
$('#delegate10').attr('value', '');
$('#position6').attr('value', '');
$('#position7').attr('value', '');
$('#position8').attr('value', '');
$('#position9').attr('value', '');
$('#position10').attr('value', '');
} else if (currentVal == 2700) {
$("#d_names p")
.slice(0, -4)
.fadeIn();
$('#delegate7').attr('value', '');
$('#delegate8').attr('value', '');
$('#delegate9').attr('value', '');
$('#delegate10').attr('value', '');
$('#position7').attr('value', '');
$('#position8').attr('value', '');
$('#position9').attr('value', '');
$('#position10').attr('value', '');
} else if (currentVal == 3150) {
$("#d_names p")
.slice(0, -3)
.fadeIn();
$('#delegate8').attr('value', '');
$('#delegate9').attr('value', '');
$('#delegate10').attr('value', '');
$('#position8').attr('value', '');
$('#position9').attr('value', '');
$('#position10').attr('value', '');
} else if (currentVal == 3600) {
$("#d_names p")
.slice(0, -2)
.fadeIn();
$('#delegate9').attr('value', '');
$('#delegate10').attr('value', '');
$('#position9').attr('value', '');
$('#position10').attr('value', '');
} else if (currentVal == 4050) {
$("#d_names p")
.slice(0, -1)
.fadeIn();
$('#delegate10').attr('value', '');
$('#position10').attr('value', '');
} else if (currentVal == 4500) {
$("#d_names p")
.slice(0)
.fadeIn();
}
if (!isNaN(currentVal)) {
$('#sub')
.val(currentVal)
.formatCurrency({
region: 'en-GB'
});
$('#vat')
.val((currentVal) / 100 * 20)
.formatCurrency({
region: 'en-GB'
});
$('#total')
.val((currentVal) * 1.2)
.formatCurrency({
region: 'en-GB'
});
$('.sub').html((currentVal)).formatCurrency({region: 'en-GB'});
$('.vat').html((currentVal)/100 * 20 ).formatCurrency({region: 'en-GB'});
$('.total').html((currentVal) * 1.2 ).formatCurrency({region: 'en-GB'});
} else {
$('#sub')
.val(0);
$('#vat')
.val(0);
$('#total')
.val(0);
}
});
});
HTML
<p class="selectq"><select name="numbers" id="delegates">
<option value="">Places required</option>
<option value="450">1</option><option value="900" >2</option><option value="1350">3</option>
<option value="1800">4</option>
<option value="2250">5</option>
<option value="2700">6</option>
<option value="3150">7</option>
<option value="3600">8</option>
<option value="4050">9</option>
<option value="4500">10</option>
</select></p>
<p>Delegate names (£450+VAT per delegate):</p>
<p class="regs"><span>Name</span>Position</p>
<div id="d_names">
<p><label for="delegate1">Name</label><input type="text" id="delegate1" size="20" name="delegate1" />
<label for="position1">Position</label><input type="text" id="position1" size="20" name="position1" /></p>
<p><label for="delegate2">Name</label><input type="text" id="delegate2" size="20" name="delegate2" />
<label for="position2">Position</label><input type="text" id="position2" size="20" name="position2" /></p>
<p><label for="delegate3">Name</label><input type="text" id="delegate3" size="20" name="delegate3" />
<label for="position3">Position</label><input type="text" id="position3" size="20" name="position3" /></p>
<p><label for="delegate4">Name</label><input type="text" id="delegate4" size="20" name="delegate4" />
<label for="position4">Position</label><input type="text" id="position4" size="20" name="position4" /></p>
<p><label for="delegate5">Name</label><input type="text" id="delegate5" size="20" name="delegate5" />
<label for="position5">Position</label><input type="text" id="position5" size="20" name="position5" /></p>
<p><label for="delegate6">Name</label><input type="text" id="delegate6" size="20" name="delegate6" />
<label for="position6">Position</label><input type="text" id="position6" size="20" name="position6" /></p>
<p><label for="delegate7">Name</label><input type="text" id="delegate7" size="20" name="delegate7" />
<label for="position7">Position</label><input type="text" id="position7" size="20" name="position7" /></p>
<p><label for="delegate8">Name</label><input type="text" id="delegate8" size="20" name="delegate8" />
<label for="position8">Position</label><input type="text" id="position8" size="20" name="position8" /></p>
<p><label for="delegate9">Name</label><input type="text" id="delegate9" size="20" name="delegate9" />
<label for="position9">Position</label><input type="text" id="position9" size="20" name="position9" /></p>
<p><label for="delegate10">Name</label><input type="text" id="delegate10" size="20" name="delegate10" />
<label for="position10">Position</label><input type="text" id="position10" size="20" name="position10" />
</p>
</div>
<br class="clearfloat"><p class="price">Subtotal: <span class="sub"></span></p>
<p class="price">VAT: <span class="vat"></span></p>
<p class="price">Total: <span class="total"></span></p>
<input type="hidden" name="sub" id="sub" value=""/><input type="hidden" name="vat" id="vat" value="" /><input type="hidden" name="total" id="total" value=""/>