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

Hi I have an input form and I also have some labels which will help a user to fill out the form. My css is set to hide these by default but when the user clicks on focus's on the input field then the next label will show and on blur it will be hidden.

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

With the current script I have written for some reason it keeps showing all the labels and it doesn't seem to hide it on blur.

我写的当前脚本由于某种原因它一直显示所有标签，它似乎没有隐藏模糊。

Not an expert on jQuery so if any could help me fix this problem that would great.

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

My code is below or view a jsFiddle:

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

js/js.js

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

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

的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> 

2 个解决方案

#1

Try

尝试

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

---

Better Approach

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();
    });
});

---

Better use .on() instead of .bind()

As of jQuery 1.7, the .on() method is the preferred method for attaching event handlers to a document. For earlier versions, the .bind() method is used for attaching an event handler directly to elements. Handlers are attached to the currently selected elements in the jQuery object, so those elements must exist at the point the call to .bind() occurs. For more flexible event binding, see the discussion of event delegation in .on() or .delegate().

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

---

References

this keyword

这个关键字

.next()

。下一个（）

.find()

。找（）

.parent()

.parent（）

#2

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

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

});

This should work

这应该工作