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

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");
        }
    })
}

$（文档）.ready（函数（）{
$（“#first”）.keyup（函数（事件）{
event.preventDefault（）；
ajax#u检查（“第一”）；
});
$（“#last”）.keyup（函数（事件）{
event.preventDefault（）；
ajax#U检查（“最后一次”）；
});
});
函数ajax\u检查（当前）
{
var check=$（当前）.val（）；
$.post（“validate.php”，{tocheck:check}，函数（已填充）{
如果（已填充=='1'）
{   
$（“.check”）.html（“”）；
$（“.ajax\u check”）.removeClass（“错误”）；
$（“.ajax_check”）.addClass（“成功”）；
}
其他的
{
$（“.check”）.html（“”）；
$（“.ajax\u check”）.removeClass（“错误”）；
$（“.ajax_check”）.removeClass（“success”）；
}
})
}

HTML

名字
姓

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

有没有一种方法可以对这两个输入重复使用该函数？我是Javascript新手，所以我有点迷路了。谢谢大家!

---

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

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

---

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

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

---

您需要保存此引用并搜索最近的表单：

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);

---

您需要保存此引用并搜索最近的表单：

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);

---

它与您请求的作用域有关。

。在ajax调用中检查
。您将返回到文档级别（而不仅仅是在当前节点中）。一个简单的更改就可以按预期工作：

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");
    }
})

您还可以稍微重构绑定，使其更加简短：

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

它与您请求的作用域有关。
。在ajax调用中检查
。您将返回到文档级别（而不仅仅是在当前节点中）。一个简单的更改就可以按预期工作：

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");
    }
})

您还可以稍微重构绑定，使其更加简短：

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

我在JSFIDLE中进行了一次尝试，它工作正常！（浏览器Chrome）我在JSFIDLE中进行了一次尝试，它工作正常！（浏览器Chrome）感谢您的回复（和其他人一样），我已经尝试添加了这个，现在它可以工作了，但出于某种原因，
$scope.find（“.ajax_check”）.removeClass（“错误”）$scope.find（“.ajax_check”）.addClass（“success”）似乎不起作用。但是
$scope.find（“.check”）.html（“1”）工作。有什么想法吗？*我在里面放了一个1，这样我就可以测试它了。因为
$scope
是
.ajax\u check
，所以find没有找到它，因为它正在查找childrens@Karl-安德烈·加农是对的，我的大脑放屁了。只需使用
$scope
而不是
$scope.find
。我会相应地修改我的答案，很抱歉搞混了。非常感谢你们。我之前也试过$scope，哈哈。我希望我能给你们两个最好的答案，因为你的和@Karl AndréGagnon都很棒，而且很有效，但我选择这一个是因为它是一个简单的编辑，我保持了我的风格，而且我很容易阅读和记忆。再次感谢您，我刚刚注意到我使用了
ajax-check
而不是
ajax\u-check
，所以如果您发现它不起作用，那就是我对细节的关注不够；p从好的方面来看，这里有一个演示：感谢您的回复（以及其他人），我已经尝试添加了这个，现在它可以工作了，但出于某种原因，
$scope.find（“.ajax_check”）.removeClass（“error”）$scope.find（“.ajax_check”）.addClass（“success”）似乎不起作用。但是
$scope.find（“.check”）.html（“1”）工作。有什么想法吗？*我在里面放了一个1，这样我就可以测试它了。因为
$scope
是
.ajax\u check
，所以find没有找到它，因为它正在查找childrens@Karl-安德烈·加农是对的，我的大脑放屁了。只需使用
$scope
而不是
$scope.find
。我会相应地修改我的答案，很抱歉搞混了。非常感谢你们。我之前也试过$scope，哈哈。我希望我能给你们两个最好的答案，因为你的和@Karl AndréGagnon都很棒，而且很有效，但我选择这一个是因为它是一个简单的编辑，我保持了我的风格，而且我很容易阅读和记忆。再次感谢您，我刚刚注意到我使用了
ajax-check
而不是
ajax\u-check
，所以如果您发现它不起作用，那就是我对细节的关注不够；p在好的方面，这里有一个演示：