javascript - 优化 jquery 脚本

标签 javascript jquery

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

最佳答案 

$(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();
        }
    });
});

FIDDLE

关于javascript - 优化 jquery 脚本，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17003937/

上一篇：php - 如何在页面重新加载时保留 jqGrid 中的页码和排序标准？

下一篇：javascript - 寻找选择 jquery lightbox 插件的指南

相关文章：

jquery - iPad 的典型 CSS 菜单下拉悬停问题

javascript - 为什么这个javascript函数在没有被调用的情况下运行？

jquery - e.stopPropagation 可以工作，但在控制台中出现错误

php - 如何通过 AJAX 使用 formdata 发送更多数据

javascript - 如何使用 jquery 在每个列表项后添加换行符或 <br/>？

javascript - 如果按下按钮，jQuery onunload 会执行操作

javascript - 从 React Hook 复制一个数组

javascript - 在 Sublime text 中使用来自控制台的输入运行节点 js

javascript - 用户提交表单后显示数据(从 API 调用检索)而不刷新页面

javascript - 如何使用 Vuetify 验证复选框组

©2024 IT工具网  联系我们