0 
$('.search-input').focus(function () {
    $(this).val('');
});
$('.search-input').blur(function () {
    if ($(this).val() == '') {
        $(this).val('enter the place');
    }

});

$('#edit-name').keyup(function () {
    if ($(this).val() != '') {
        $('.username .error-message').remove();
    } else {
        $('#edit-name').after('<span style="color:red;" class="error-message" >enter the name！&lt;/span>');
    }
});

$('#edit-name').blur(function () {
    if ($(this).val() == '') {
        $('.username .error-message').remove();
        $('#edit-name').after('<span style="color:red;" class="error-message" >enter the name！&lt;/span>');
    }

});

$('#edit-pass').keyup(function () {
    if ($(this).val() != '') {
        $('.password .error-message').remove();
    } else {
        $('#edit-pass').after('<span style="color:red;" class="error-message"> enter the password！&lt;/span>');
    }
});

$('#edit-pass').blur(function () {
    if ($(this).val() == '') {
        $('.password .error-message').remove();
        $('#edit-pass').after('<span style="color:red;" class="error-message" >enter the password！&lt;/span>');
    }

});

コードをマージまたは美化する方法はありますか？ありがとうございます。

4

4 に答える 4

2

jQueryの最も優れた機能の1つは、1つのセレクターで複数のイベントを配置できるチェーンです。したがって、最初の2つの関数は次のようになります。

$('.search-input').focus(function(){
    $(this).val('');
}).blur(function(){
    if($(this).val()==''){
      $(this).val('enter the place');  
    }
});

もう1つのオプションは、次のように、これをすべてイベントマップの下に配置することです。

$('.search-input').on({
    focus: function(){
        $(this).val('');
    }, blur: function(){
        if($(this).val()=='') $(this).val('enter the place');  
    }
});

.bind同じ機能で複数のイベントがある場合は、 or .on（はるかに好ましい）を使用してすべてのイベントを1つに追加することで、実際に一度にすべてのイベントをバインドできます。次に、複数の要素を選択する場合は、セレクター内でそれらをコンマで区切ることによっても選択できます。を使用して、関連する要素を参照できます$(this)。

$('#edit-name, #edit-pass').on('keyup blur', function(){
    if($(this).val()!=''){
    $('.username .error-message').remove();
    }else{    
        $(this).after('<span style="color:red;" class="error-message" >enter the name！&lt;/span>');
    }
});

ご覧のとおり、同じものを何度もコピーすることなく、実際に必要な関数は2つだけです。

于 2012-11-01T03:40:28.413 に答える
1

各セレクターで複数の要素を選択thisし、イベントが発生した特定の要素を参照するために使用できます。

例：

$("#foo, #bar").keyup(function() {
  $(this).after('a');
});

いずれかをキーアップする#fooと、その要素の後#barに追加されます。a

この手法を使用すると、2つのキーアップブロックとブラーブロックをそれぞれ1つに組み合わせることができます。

もう1つは、イベントを連鎖させることです。

$("#foo, #bar").keyup(function() {
  $(this).after('a');
}).blur(function(){
  $(this).after('b'); 
});

これは、キーアップイベントとブラーイベントの両方に同じセレクターを使用します。

これがデモです

于 2012-11-01T03:39:06.997 に答える
0

jqueryでチェーンを利用します。二重選択する必要はありません。

例えば：

$('.search-input').focus(function(){
    $(this).val('');
}).blur(function(){
      if( $(this).val()=='' ){
          $(this).val('enter the place');  
    }
});

他の人と一緒にこれを行うこともできます。

可能な場合は$（this）を使用します。

$('#edit-name').blur(function(){
    if( $(this).val()=='' ){
       $('.username .error-message').remove();
  -->>>$(this).after('<span style="color:red;" class="error-message" >enter the name！&lt;/span>'); 
    }

});
于 2012-11-01T03:39:55.777 に答える
0 
$('.search-input').focus(function () {
    $(this).val('');
});
$('.search-input').blur(function () {
    if ($(this).val() == '') {
        $(this).val('enter the place');
    }

});

上記のコードの代わりにプレースホルダー属性を使用できます。

<input type="text" name="search" class="search-input" placeholder="enter the place" />
于 2012-11-01T03:52:16.843 に答える