1

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>

私が抱えている問題は、入力の1つに情報を入力すると、もう1つも強調表示されることです。これは発生しないはずです。そして、私のコードはちょっとずさんだと思いますが、入力フィールドごとに関数を作成する代わりに、ajax_check 関数を再利用しようとしています。

両方の入力に対して関数を再利用する方法はありますか? 私はJavascriptが初めてなので、ちょっと迷っています。ありがとうございました！

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

4

3 に答える 3

2

コンマを使用してセレクターに項目を追加できます。これを使用して現在の要素を取得できます。

$("#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();
于 2013-07-11T12:41:02.693 に答える
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. 最も近い

于 2013-07-11T12:42:08.280 に答える
2

.checkajax呼び出しでリクエストしているスコープに関係しています。(現在のノード内だけでなく) ドキュメント レベルに戻ります。簡単な変更により、これが意図したとおりに機能します。

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-11T12:42:20.257 に答える