Question

$('.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！</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！</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！</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！</span>');
    }

});

有没有办法合并或美化代码？谢谢。

Answer 1

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！</span>');
    }
});

所以你看，你真的需要两个功能而不会一遍又一遍地复制相同的东西。

Answer 2

您可以在每个选择器中选择多个元素，并使用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事件使用相同的选择器。

Here's a demo

Answer 3

利用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！</span>'); 
    }

});

Answer 4

$('.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" />

如何将这些不同的语句合并为更优雅的代码

4 个答案: