javascript - 在javascript中为使用相同类的元素重用相同的函数不起作用

Question

Javascript：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script>    
$(document).ready(function(){
    $("#first").keyup(function(event){
        event.preventDefault();
        ajax_check("#first");
    });
    $("#last").keyup(function(event){
        event.preventDefault();
        ajax_check("#last");
    });
});
function ajax_check(current)
{
    var check=$(current).val();
    $.post("validate.php", {tocheck : check}, function(filled) {
        if(filled == '1')
        {   
            $(".check").html("");
            $(".ajax_check").removeClass("error");
            $(".ajax_check").addClass("success");
        }
        else 
        {
            $(".check").html("");
            $(".ajax_check").removeClass("error");
            $(".ajax_check").removeClass("success");
        }
    })
}

HTML

<div class="control-group ajax_check">
    <label class="control-label" for="first">First Name</label>
    <div class="controls">
        <input type="text" id="first" class="validate" placeholder="First" required>
        <span class="help-inline check" ></span>
    </div>
</div>
<div class="control-group ajax_check">
    <label class="control-label" for="last">Last Name</label>
    <div class="controls">
        <input type="text" id="last" class="validate" placeholder="Last" required>
        <span class="help-inline check" ></span>
    </div>
</div>

我遇到的问题是，当我为其中一个输入输入信息时，另一个输入也被突出显示，这是不应该发生的。而且我认为我的代码有点草率，但我试图重用 ajax_check 函数，而不是为每个输入字段创建一个函数。

有没有办法可以为两个输入重用该函数？我是 Javascript 的新手，所以我有点迷路了。谢谢！

http://i.imgur.com/BiLObRF.png

Answer 1

您可以使用逗号在选择器中添加项目，您可以使用它来获取当前元素，

$("#first, #last").keyup(function(event){
    event.preventDefault();
    ajax_check('#'+this.id);
});

或者，传递对象而不是 id。

 $("#first, #last").keyup(function(event){
    event.preventDefault();
    ajax_check($(this));
});


function ajax_check(current)
{
    var check=current.val();

Answer 2

您需要保存此参考并搜索最接近的表格：

function ajax_check(e)
{
    e.preventDefault()
    var $this = $(this)
    var check=$this.val();
    $.post("validate.php", {tocheck : check}, function(filled) {
        $this.siblings(".check").html("");
        $this.closest(".ajax_check").removeClass("error").toggleClass("success", filled == '1');
    })
}

$("#first, #last").keyup(ajax_check);

1. 兄弟姐妹

2. 最近的

Answer 3

it has to do with the scope you're requesting .check within in the ajax call. You're going back to document-level (instead of just within the current node). A simple change makes this work as intended:

var $this = $(current), // store reference to jquery object
    $scope = $this.closest('.ajax_check'), // set scope to .ajax_check
    check = $this.val();
$.post("validate.php", {tocheck : check}, function(filled) {
    if(filled == '1')
    {
        // use .find() to search _within_ $scope and not across
        // the entire document.
        $scope.find(".check").html("");
        $scope.removeClass("error").addClass("success");
    }
    else 
    {
        // same thing, search within $scope
        $scope.find(".check").html("");
        $scope.removeClass("error success");
    }
})

You can also refactor your bindings a bit to make this a little more brief as well:

$("#first,#last").keyup(function(event){
    event.preventDefault();
    ajax_check(this); // this is automatically going to be #first or #last
                      // just by the selector above
});