0

实际上，我在 HTML 中有超过 8 个输入和 8 个不同的 id，我想将 jquery 对象传递给 onblur 事件函数，所以我不需要创建 8 个重复函数并且只创建 1 个脚本函数。我一直在努力搜索堆栈溢出几个小时，但找不到我的问题的答案，或者我可能只是 jquery 的新手。希望您能帮助我并提前感谢...

   function fill(t,xx,zz) {
    $(xx).val(t);
    setTimeout("$(zz).hide();", 200);
}

 <input  type="text" id="inputString" size="50" value="" onkeyup="lookup(this.value);" onblur="fill(this.value,'#inputString','#suggestions');" />  
 <div class="suggestionsBox" id="suggestions" style="display: none;">

为了让您更好地理解代码，这是真正有效的原始代码，仅适用于 1-input html 标记。我打算在 8 输入 html 标签上只使用一个函数。

  <script type="text/javascript" src="jquery-1.2.1.pack.js"></script>

function lookup(xString) {
    if(xString.length == 0) {
        // Hide the suggestion box.
        $('#suggestions').hide();
    } else {
        $.post("db_rpc.php", {queryString: ""+xString+""}, function(data){
            if(data.length >0) {
                $('#suggestions').show();
                $('#autoSuggestionsList').html(data);
            }
        });
    }
} // lookup

function fill(t) {
    $('#inputString').val(t);
    setTimeout("$('#suggestions').hide();", 200);
}
4

3 回答 3

2

让你的所有元素共享同一个类。

<div id="idOne" class="toBlur" />
<div id="idTwo" class="toBlur" />
<div id="idThree" class="toBlur" />

blur告诉 jQuery，当事件被触发时，您希望将相同的函数应用于该类的每个项目。

$(".toBlur").blur(function() {
  // Do whatever.
});

此外，如果您要使用 jQuery（它在您的问题标签中），则不应像您那样在 HTML 中分配回调。

于 2012-12-19T09:45:17.270 回答
0

我通过将参数传递给两个函数，使其使用 1 组函数用于 8 输入标签。我放置了一个 switch 语句来确定在函数填充中看到的输入标签 ID。我还在函数查找中添加了另一个 POST 变量。以下是我修改后的代码：

 function lookup(inputString,nn) {
    if(inputString.length == 0) {
        // Hide the suggestion box.
        $('#suggestions').hide();
    } else 
    {
        $.post("db_rpc.php", {queryString: ""+inputString+"",nns: ""+nn+""}, function(data) 
        { //nns added a new post variable nns for php mysqli
            if(data.length >0) {
                $('#suggestions').show();
                $('#autoSuggestionsList').html(data);
            }
        });
    }
}; // lookup

function fill(xx,n) {
switch(n) {
  case 1:
   $('#namedetails').val(xx); // input id
   break;
  case 2:
   $('#catdetails').val(xx);
   break;
}   
setTimeout("$('#suggestions').hide();", 200);
};     


<td class="absy"><input name="namedetails" type="text" id="namedetails" size="50" value="" onkeyup="lookup(this.value,1);" onblur="fill(this.value,1);"/>
        <div class="suggestionsBox" id="suggestions" style="display: none;">
            <img src="upArrow.png" style="position: relative; top: -12px; left: 30px;" alt="upArrow" />
            <div class="suggestionList" id="autoSuggestionsList">
                &nbsp;
            </div>
        </div>

我只想感谢所有努力回答我的问题的人......我仍然从你的建议中学到了东西。也许我的问题对你们来说有点含糊，可能是因为我对 jquery 还很陌生，只是在长时间休息后才回来编码。再次感谢...

于 2012-12-20T01:15:10.527 回答
0

您可以使用事件处理程序和类来做到这一点：

<input  type="text" class="inputString" />  
<div class="suggestionsBox" id="suggestions" style="display: none;">

JS

$('.inputString').on({
    keyup: function() {
        lookup(this.value);
    },
    blur: function() {
        var self = this;
        setTimeout(function() {
            $(self).next('.suggestionsBox').hide()
        },200);
    } 
});
于 2012-12-19T09:46:35.810 回答