Question

我有一个包含2个div的表单，每个div包含一组字段。

我想做这样的事情：

$(document).ready( function(){
  $(".sectionBox").click( function(){
      $(this).removeClass('dim');
      $(".sectionBox").not(this).addClass('dim')
  });
});

如果用户单击div本身或<input>字段，这非常有效。但是，如果用户点击<select>字段，它就不起作用 - 显示下拉列表，而我的div根本没有响应。我怎样才能确保他们回复：

选择框？（所需的）
什么都有？（优选的）

非常感谢！

澄清

伙计们，非常感谢您迄今为止的回复。我想简单地将.dim添加到容器div中，如果div本身或该div内的任何内容被点击/聚焦。 @LiangliangZheng和@wdm - 您的解决方案似乎将.dim添加到多个元素（我只想要容器div）。

这就是我现在所处的位置：

$(".sectionBox").click( function(){
    $(this).removeClass('dim');
    $(".sectionBox").not(this).addClass('dim');
});
$("select").focus( function(){
    $(".sectionBox").addClass('dim');
    $(this).parent(".sectionBox").removeClass('dim');
});

这似乎有效。我有什么办法可以使上述内容更加健壮吗？

Answer 1

我对你的问题做了一些假设，这是我建议的代码：

$(document).ready( function(){
  $(".sectionBox *").focus( function(){
      var $t = $(this).closest('.sectionBox')
      $t.removeClass('dim');
      $(".sectionBox").not($t).addClass('dim');
    })
    .click(function(){$(this).trigger('focus')});
});

你可以在这里看到小提琴http://jsfiddle.net/xy8VC/4/

<强>更新

$(document).ready( function(){
  $(".sectionBox").addClass('dim');

  $(".sectionBox")
  .click( function(){
      $(this).removeClass('dim');
      $(".sectionBox").not(this).addClass('dim')
  })
  $(".sectionBox *").focus( function(){
      $(this).closest(".sectionBox").trigger('click');
    });
});

http://jsfiddle.net/xy8VC/6/

首先，我想指出我的第一次尝试也会为你的容器添加'暗淡'。如果您乐意采用您找到的代码，我想分享三点：

$(document).ready(function(){
    // Since your containers are not dynamic, wrap 
    // them into an array, so you don't need to call 
    // $() to select the containers every time.
    var $box = $('.sectionBox'); 
    $box.addClass('dim');

    $box.click( function(){
        $(this).removeClass('dim');
        $box.not(this).addClass('dim');
    });
    // Also have input included.
    $box.find("select,input").focus( function(){ 
        $box.addClass('dim');
        // Replace parent() with closest() for more 
        // flexibility, unless you are sure that all fields 
        // are direct-children to your container.
        $(this).closest(".sectionBox").removeClass('dim'); 
    });
});

试试这个：http://jsfiddle.net/xy8VC/8/

Answer 2

您需要绑定到change事件而不是选择框的click事件。

Answer 3

不确定这是否正是您尝试做的，但请查看此演示。

演示：http://jsfiddle.net/wdm954/xy8VC/3/

基本上我正在做的是将 dim 类应用于所有未聚焦的事物（本例中不包括标签标签）。这样只允许聚焦场完全不透明。

编辑：稍微更改了我的代码以包含keyup事件，该事件允许使用标签。

$('.sectionBox').bind('click keyup', function() {
    $(this).removeClass('dim')
    .children().removeClass('dim')
    .not(':focus, label').addClass('dim');
});

JQuery - 检测div内任何位置的单击（包括其他元素）

澄清

3 个答案: