使用相同的类重用相同功能的JavaScript元素不工作

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

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>

我遇到的问题是，当我在信息输入对于其中一个输入，另一个也被突出显示，这不会发生。我认为我的代码有点sl，，但我试图重用ajax_check函数，而不是为每个输入字段设置函数。

有没有一种方法可以重用这两种输入的功能？我是Javascript新手，所以我有点迷路。谢谢！

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

来源

2013-07-11 ZZPLKF

我给它一个尝试的jsfiddle，它的工作正确！（浏览器Chrome） –

它^ h关于您在ajax调用中请求.check的范围。您将回到文档级别（而不是仅在当前节点内）。一个简单的变化使得按预期这项工作：

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

来源

2013-07-11 12:42:20

感谢您的回复（以及其他人），我已经尝试添加这个，现在它可以工作，但由于某种原因，'$ scope.find（“。ajax_check”）。removeClass（“error “）; $ scope.find（“。ajax_check”）。addClass（“success”）;'似乎没有工作。但''scope.find（“。check”）。html（“1”）;'工作。有任何想法吗？ *我在里面放一个1来显示，这样我就可以测试它了。 – ZZPLKF

，因为'$ scope'是'.ajax_check'，所以找不找它，因为它正在寻找儿童 –

@ Karl-AndréGagnon是对的，我脑海中放屁。只需使用'$ scope'而不是'$ scope.find'。我会相应地修复我的答案，并为混淆感到抱歉。 –

您可以使用逗号在选择添加项目，你可以用这个来获得当前元素，

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

OR，传递对象，而不是ID。

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


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

来源

2013-07-11 12:41:02 Adil

您需要保存this引用和搜索最接近的形式：

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

来源

2013-07-11 12:42:08

使用相同的类重用相同功能的JavaScript元素不工作

回答

相关问题