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 最好的功能之一是链接，您可以在其中使用一个选择器放置多个事件。因此，您可以像这样简单地使用前两个功能：

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

另一种选择是将所有这些都放在事件映射下，如下所示：

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

.bind如果您有相同的功能但有多个事件，您实际上可以通过使用或.on（更优选）一次将它们全部绑定，然后将所有事件添加到一个中。然后，如果您想选择多个元素，也可以通过在选择器内用逗号分隔它们来实现。您可以使用 引用相关元素$(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>');
    }
});

所以你看，你只需要两个函数，而不需要一遍又一遍地复制相同的东西。

于 2012-11-01T03:40:28.413 回答
1

您可以在每个选择器中选择多个元素，并使用它this来引用触发事件的特定元素。

例子：

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

当您在其中一个上键入时，#foo它#bar会a在该元素之后添加。

使用这种技术，您可以将两个 keyup 和 blur 块合并为一个。

另一件事是连锁事件：

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

这对 keyup 和 blur 事件使用相同的选择器。

这是一个演示

于 2012-11-01T03:39:06.997 回答
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 回答
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 回答