Question

我想优化下面这段代码，但不确定怎么办，在页面加载时我不想检查我的收音机是真还是假，并根据结果我不想发送相应的邮政编码给我的ajax请求。但如果我的邮政编码被用户改变了，我不想重新请求ajax，但不能以更“整洁”的方式完成吗？

 $("#PostalCode").live("change", function () {
    // check if change delivery is set 
    if ($('#radio-no').attr('checked')) {
        var postalCodeId = $(this).val();
        SetWebservice(postalCodeId);
    }
});

// Get delivery point from alternative location
$("#ShipPostalCode").live("change", function () {
    // check if change delivery is set 
    if ($('#radio-yes').attr('checked')) {
        var postalCodeId = $(this).val();
        SetWebservice(postalCodeId);
    }
});

// on page load run this ...
if ($('#radio-yes').attr('checked')) {
    var postalCodeId = $("#ShipPostalCode").val();
    SetWebservice(postalCodeId);
} else {
    var postalCodeId = $("#PostalCode").val();
    SetWebservice(postalCodeId);
}



function SetWebservice(postalCodeId) {
    if ($('#Webservice_1').length) {
        $.ajax({
            type: "POST",
            url: "/functions/api/postdk/controller.aspx",
            data: "postalCodeId=" + postalCodeId,
            success: function (data) {
                $('#Webservice_1').html(data);
            }
        });
    }
    if ($('#Webservice_2').length) {
        $.ajax({
            type: "POST",
            url: "/functions/api/gls/controller.aspx",
            data: "postalCodeId=" + postalCodeId,
            success: function (data) {
                $('#Webservice_1').html(data);
            }
        });
    }

}

Answer 1

你应该调整很多东西：

live已弃用 - ＆gt;使用而不是
不要与＆＃34; attr＆＃34;使用.is（＆＃34;：已检查＆＃34;）
你可以在＆＃34; on＆＃34;将事件应用于多个dom元素

你可以创建执行＆＃34;检查＆＃34;的功能。并从＆＃34; on＆＃34;和像这样的负载：

$(function(){
    var checkPostal = function() {
        if ($('#radio-yes').is(':checked')) {
            SetWebservice($("#ShipPostalCode").val());
        }
        // check if change delivery is set 
        if ($('#radio-no').is(':checked')) {
            SetWebservice($("#PostalCode").val());
        }
    }

    $(document).on("change", "#PostalCode,#ShipPostalCode", function() {
        checkPostal();
    });

    // on page load run this ...
    checkPostal();
});

编辑：如果可能，您应该尝试避免像这样的全局事件侦听器。所以如果＆＃34;＃PostalCode＆＃34;输入不是＆＃34;替换＆＃34; - 你应该使用

$("#PostalCode,#ShipPostalCode").change(function()  ...)

Answer 2

目标是让一个方法检查字段并触发调用......

http://plnkr.co/edit/msIjZhJru0QJAr4Sh6L4

脚本：

$( document ).ready(function() {
  var SetWebservice=function(postalCodeId){
    var url, resultToElId;
    if ($('#Webservice_1').length) {
      url="/functions/api/postdk/controller.aspx";
      resultToElId='Webservice_1';
    }else if ($('#Webservice_2').length) {
      url="/functions/api/postdk/controller.aspx";
      resultToElId='Webservice_2';
    }
    if(resultToElId){
      console.log('SetWebservice:',postalCodeId);
      $.ajax({
        type: "POST",
        url: "/functions/api/gls/controller.aspx",
        data: "postalCodeId=" + postalCodeId,
        success: function (data) {
            $('#'+resultToElId).html(data);
          }
      });
    }else{
     console.warn('SetWebservice: No call made for postacode:',postalCodeId);
    }
  };
  var updatePostalCode = function(el){
    // determine radio value (value is the input to get postal code from)
    var fieldId = $('input[name=rdo]:checked').val();
    var postalCodeId = $('#'+fieldId).val();
    SetWebservice(postalCodeId);
  };
  // setup listeners
  $("#PostalCode").on('change',updatePostalCode);
  $("#ShipPostalCode").on('change',updatePostalCode);
  $('input[type=radio][name=rdo]').on('change',updatePostalCode);
  // init on page load
  updatePostalCode();

});

标记：

<div>
       PostalCode
        <input id="PostalCode" value='01234'>
     </div>
     <div>
       ShipPostalCode
        <input id="ShipPostalCode" value='98765'>
     </div>

    <div>
      radio-no:  
      <input name="rdo" type="radio" 
        id="radio-no" 
        value="PostalCode"
        checked="checked">
    </div>
    <div>
      radio-yes:  
      <input name="rdo" type="radio" 
        id="radio-yes" 
        value="ShipPostalCode">
    </div>

结合2个jquery函数

2 个答案: