jQuery在输入表单上绑定焦点和模糊事件

Question

嗨,我有一个输入表单,我还有一些标签,可以帮助用户填写表格.我的css设置为默认隐藏这些,但是当用户点击输入字段上的焦点时,下一个标签将显示并且模糊它将被隐藏.

使用我编写的当前脚本由于某种原因它会一直显示所有标签,并且它似乎不会隐藏在模糊上.

不是jQuery的专家所以,如果有任何可以帮助我解决这个问题,这将是伟大的.

我的代码在下面或查看jsFiddle:

JS/js.js

$(document).ready(function(){
$('.form-control').bind('blur', function(){
$('.form_helper').removeClass("form_helper_show").addClass('.form_helper'); });

$('.form-control').bind('focus', function(){
$('.form_helper').removeClass("form_helper").addClass('form_helper_show'); });    

});

CSS/style.css文件

ul {
 list-style:none;
}     

li:nth-child(2), li:nth-child(3) {
display:inline;
}

.form_helper { 
display:none;   
}

.form_helper_show {
display:inline-block;   
}

的index.html

<div class="form-group">
<ul class="form_group">
    <li><label for="client_name">Company Name</label></li>
    <li><input class="form-control" name="client_name" type="text" id="client_name"/></li>
    <li><label for="client_name_helper" class="form_helper">Input your clients name</label></li>
 </ul>    
</div>
 <div class="form-group">
 <ul class="form_group">
    <li><label for="client_name">Company Code</label></li>
    <li><input class="form-control" name="client_name" type="text" id="client_name"/></li>
    <li><label for="client_name_helper" class="form_helper">Input your clients code</label></li>
</ul>    
</div> 

Answer 1

尝试

fiddle Demo

$(document).ready(function () {
    $('.form-control').bind('blur', function () {
        $(this).parent().next('li').find('.form_helper_show').removeClass("form_helper_show").addClass('form_helper');
    });

    $('.form-control').bind('focus', function () {
        $(this).parent().next('li').find('.form_helper').removeClass("form_helper").addClass('form_helper_show');
    });
});

更好的方法

fiddle Demo

$(document).ready(function () {
    $('.form-control').bind('blur', function () {
        $(this).parent().next('li').find('.form_helper').hide();
    }).bind('focus', function () {
        $(this).parent().next('li').find('.form_helper').show();
    });
});

更好地使用.on()而不是.bind()

从jQuery 1.7开始,.on()方法是将事件处理程序附加到文档的首选方法.对于早期版本,.bind()方法用于将事件处理程序直接附加到元素.处理程序附加到jQuery对象中当前选定的元素,因此这些元素必须存在于调用.bind()的位置.有关更灵活的事件绑定,请参阅.on()或.delegate()中对事件委派的讨论.

参考

这个关键字

.下一个()

.找()

.parent()