在 jQuery 中简化 .click 函数

Question

假设我有一个 ID 为 #trigger 的 <label> 标签，它应该在点击时触发元素 .target 的 .hide(); 事件。单击 #trigger 以外的任何其他元素应该会再次显示 .target。这是我的代码，它可以工作，但我觉得它可以简化。

$('ul#category li label#trigger').click(function() {
    $('.target').hide(500);
});
$('ul#category li label:not(#trigger)').click(function() {
    $('.target').show(500);
});

我认为这可以通过条件来简化？

Answer 1

您需要查看您是否没有点击 #target 或其子项 hide target else show。

$(document).on('click', function(e){
    var that = $(e.target);
    if(that.prop('id')!='trigger' || that.closest('#trigger').length===0){
       $('.target').show(500);
    }else{
        $('.target').hide(500);
    }
});

已更新 Fiddle http://jsfiddle.net/vd8ddgra/1/

Answer 2

如果不设置 show/hide 动作的动画不是问题，您可以使用接受布尔值的 toggle 方法：

$('ul#category li label').click(function() {
     $('.target').toggle(this.id !== 'trigger');
});

另一种选择是：

var $target = $('.target');

$('ul#category li label').click(function() {
    var method = this.id === 'trigger' ? 'hide' : 'show';
    $target[method](500);
});

在 jQuery 中简化 .click 函数

Simplifying .click function in jQuery

jquery

conditional

onclick

show