Question

我正在尝试向每个输入字段添加描述文本，只有当字段处于焦点时才会显示，然后描述将隐藏在模糊处。

但是当输入字段被聚焦时，它会显示所有输入字段的所有描述。

希望有人可以提供帮助。

Jsfiddle：http://jsfiddle.net/serddk/6g5w2/1/

jQuery('li > .gfield_description').hide();

jQuery('li > .ginput_container > input').each( function() {
    jQuery(this).focus( function() {
        jQuery('li > .gfield_description').fadeIn('slow');
    });
    jQuery(this).blur( function() {
        jQuery('li > .gfield_description').fadeOut();
    });
});

Answer 1

li > .gfield_description与所有说明相对应，您只需使用this来引用相关说明。

这样做：

jQuery('li > .gfield_description').hide();

jQuery('li > .ginput_container > input').each( function() {
    jQuery(this).focus( function() {
        jQuery(this).parent().next().fadeIn('slow');
    });
    jQuery(this).blur( function() {
        jQuery(this).parent().next().fadeOut();
    });
});

demo

Answer 2

试试这个：

jQuery(this).parent().next().fadeIn('slow');

Answer 3

演示：http://jsfiddle.net/doniyor/6g5w2/3/

试试这个：

jQuery('li > .ginput_container > input').each( function() {
  jQuery(this).focus( function() {
    jQuery(this).parent('div').next('div').fadeIn('slow');
  });
  jQuery(this).blur( function() {
    jQuery(this).parent('div').next('div').fadeOut();
  });
});

你有这个错误，因为你的目标是这样：li > .gfield_description用这个类击中所有元素。

Answer 4

您的选择器目前是错误的，但您也可以直接删除代码，而不需要使用each来循环输入：

http://jsfiddle.net/6g5w2/4/

此代码将完全按照您的要求执行，但效率更高，因为它不会使用each进行迭代：

jQuery('li > .ginput_container > input')
.on("focus", function() {
    jQuery(this).parent().next().fadeIn('slow');    
}).on("blur", function() {    
    jQuery(this).parent().next().fadeOut();
});

我还替换了这一行：jQuery('li > .gfield_description').hide();，最初可以使用CSS进行设置，从而进一步提高性能。

显示关注输入的描述文本

4 个答案: