0

select我对元素的 jquery 事件绑定有这个问题。当我单击选择时,.focus应该添加该类。但是从下拉列表中选择一个选项会破坏逻辑。

==> JSFIDDLE

脚步:

  1. 点击选择
  2. 选择一个选项
  3. 单击选择->.focus未添加

代码:

<a>
   <select>
      <option>A</option>
      <option>B</option>
      <option>C</option>
   </select>
</a>​

$('select').focusin(function(){
    $(this).parent('a').addClass('focus');
});
$('select').bind('focusout change',function(){
    $(this).parent('a').removeClass('focus');
});​
4

3 回答 3

1

问题的根源是您仅在选择焦点时添加类,然后在选择值更改时将其删除。类永远不会被添加回来的原因是,当您选择其中一个选项时,选择永远不会失去焦点。这样的事情应该让你得到你所追求的行为:

$('select').click(function(){
   $(this).parent('a').toggleClass('focus'); 
});

$('select').blur(function() {
   $(this).parent('a').removeClass('focus'); 
});

编辑- 我猜你想在选择一个选项时保留删除类的功能,这就是为什么我会绑定到点击而不是焦点和模糊。

于 2012-10-09T23:17:09.350 回答
0

这是因为选择该选项会从元素中移除焦点,select就像您从select

所以focusout这里发生了一个选择..所以这显然删除了select..的父元素上的类

也没有添加类,因为select这里已经集中了..

所以改为使用 .blur().focus() 事件..

检查演示

于 2012-10-09T23:11:08.023 回答
0

我相信你正在寻找这样的东西,但我可能是错的:

$('select').on("focus", function(){
    $(this).parent('a').addClass('focus');
});
$('select').on('blur',function(){
    $(this).parent('a').removeClass('focus');
});​

用于on绑定事件并将focusandblur事件用于您的选择框。如果我正确理解了这个问题,这应该会解决您的问题。

例子

于 2012-10-09T23:11:59.223 回答