Question

我的编码中的朋友，当用户在一个文本框中键入代码时，使用getJSON方法自动填充文本框，特定代码的说明将显示在另一个文本框中。我在编码中使用了20多个文本框，因此getJSON方法必须被调用20次，所以我输入代码20次是否有其他替代方法来优化我的代码。

function getCodeDetails1() {
    $.getJSON("ieCodedetails.jsp", {
        codeid: $("#txtIEcode1").val()
    }, displayResult1);
}

function displayResult(data) {
    if (data.error) { // emp not found
        $("#txtIEdesc1").val(""); // clear fields
        alert(data.error);
    } 
    else { // Found employee. Display details
        $("#txtIEdesc1").val(data.name);
    }
}

function getCodeDetails2() {
    $.getJSON("ieCodedetails.jsp", {
        codeid: $("#txtIEcode2").val()
    }, displayResult2);
}

function displayResult2(data) {
    if (data.error) { // emp not found
        $("#txtIEdesc2").val(""); // clear fields
        alert(data.error);
    } 
    else { // Found employee. Display details
        $("#txtIEdesc2").val(data.name);
    }
}

function getCodeDetails3() {
    $.getJSON("ieCodedetails.jsp", {
        codeid: $("#txtIEcode3").val()
    }, displayResult3);
}

function displayResult3(data) {
    if (data.error) { // emp not found
        $("#txtIEdesc3").val(""); // clear fields 
        alert(data.error);
    } 
    else { // Found employee. Display details 
        $("#txtIEdesc3").val(data.name);
    }
}

<td><input type="text" name="txtIEcode1" id="txtIEcode1" onchange="getCodeDetails1()" style="width:60px;"></td>
<td><input type="text" id="txtIEdesc1" name="txtIEdesc1" style="width:220px;" readonly></td>
<td><input type="text" name="txtIEcode2" id="txtIEcode2" onchange="getCodeDetails2()" style="width:60px;"></td>
<td><input type="text" id="txtIEdesc2" name="txtIEdesc2" style="width:220px;" readonly></td>
<td><input type="text" name="txtIEcode3" id="txtIEcode3" onchange="getCodeDetails3()" style="width:60px;"></td>
<td><input type="text" id="txtIEdesc3" name="txtIEdesc1" style="width:220px;" readonly></td>

Answer 1

您可以尝试将您的逻辑链接到某个类而不是多个ID：

<td><input type="text" name="txtIEcode1" class="txtIEcode" style="width:60px;"></td>
<td><input type="text" name="txtIEdesc1" class="txtIEdesc" style="width:220px;" readonly></td>
<td><input type="text" name="txtIEcode2" class="txtIEcode" style="width:60px;"></td>
<td><input type="text" name="txtIEdesc2" class="txtIEdesc" style="width:220px;" readonly></td>
<td><input type="text" name="txtIEcode3" class="txtIEcode" style="width:60px;"></td>
<td><input type="text" name="txtIEdesc3" class="txtIEdesc" style="width:220px;" readonly></td>

然后在你的js：

$(".txtIEcode").each(function(i, el) {
   var $el = $(el),
       $desc = $el.parent().next('td').find(".txtIEdesc");
       $el.on('change', function(){
         $.getJSON("ieCodedetails.jsp", {
              codeid: $el.val()
         }, displayResult);

         function displayResult(data) {
            if (data.error) { // emp not found
                $desc.val(""); // clear fields
                alert(data.error);
             } 
             else { // Found employee. Display details
              $desc.val(data.name);
          }
       }
   })

});

Answer 2

 You have store the file name in variable and passed to arg 

var pageName="ieCodedetails.jsp";
var textBoxId=$("#txtIEcode1");
        getCodeDetails1(pageName,textBoxId);

         function getCodeDetails1(pageName,textBoxId) {

            $.getJSON(pageName, {
                codeid: textBoxId.val()
            }, displayResult1);
        }

优化递归getJSON方法

2 个答案: