优化jquery脚本

Optimising jquery script

本文关键字：脚本 jquery 优化      更新时间：2023-09-26

我是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);
    }

});

});


    <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=""/>

$(function () {
    $("#d_names p").hide();
    $('#delegates').change(function () {
        var sel = $('#delegates option:not(:first):selected').index();
        if (sel > 0) {
            $('#d_names p').hide().slice(0, sel).show().end().slice(sel, 10).find('input').val('');
        } else {
            $('#d_names p').find('input').val('').end().hide();
        }
    });
});

小提琴

也可以用逗号分隔

$ (" # delegate1, # delegate2 ,...,...,.."). attr("价值"、");

优化这一点的方法是将选择器保持在最小值。尽量不要创建不必要的jQuery对象。

将输入分组到类中，在更改时隐藏所有输入，然后根据选择值显示您想要显示的组

var that = $(this);
if (currentVal === 450) {
    that.find('div').hasClass('450').fadeIn();
} else if (currentVal === 900) {
   that.find('div').hasClass('450').fadeIn();
   that.find('div').hasClass('900').fadeIn();
}
相关文章：