在输入焦点/模糊上删除/添加CSS类

Question

我有一个带有一些输入字段的表单<div>,每个输入右边有一点描述.我想要的是为每个输入自己的CSS类创建<div>自己的描述.

我在这里做了一个工作的例子:http://jsfiddle.net/VL2FH/8/.这<div>在输入的焦点状态上使用:悬停状态.

我想问的是:是否有某种"捷径",所以我不必做:

$('#submit_name').bind('blur', function(){
   $('#submit_name-desc').removeClass('input-desc-hover').addClass('input-desc');
});
$('#submit_name').bind('focus', function(){
  $('#submit_name-desc').removeClass('input-desc').addClass('input-desc-hover');
});
?

对于表单中的每个输入字段.

Answer 1

您可以focus and blur像这样概括回调

$('input').on('blur', function(){
   $(this).next('div').removeClass('input-desc-hover').addClass('input-desc');
}).on('focus', function(){
  $(this).next('div').removeClass('input-desc').addClass('input-desc-hover');
});

如果您的描述divs在输入元素旁边,它将正常工作.

并且最好.on()用于事件绑定.

演示: http ://jsfiddle.net/joycse06/VL2FH/11/