使用相同的類重用相同功能的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元素不工作

回答

相關問題