简化 jQuery 中的 .click 函数答案

【问题标题】：Simplifying .click function in jQuery简化 jQuery 中的 .click 函数
【发布时间】：2015-09-08 22:10:09
【问题描述】：

假设我有一个 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);
});

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

【问题讨论】：

由于 ID 必须唯一，ul#category li label#trigger 可以缩减为 #trigger，ul#category li label:not(#trigger) 可以缩减为 :not(#trigger)。

标签： jquery onclick conditional show

【解决方案1】：

如果不为显示/隐藏动作设置动画不是问题，您可以使用接受布尔值的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);
});

【讨论】：

【解决方案2】：

你需要看看你是不是点击了#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);
    }
});

更新小提琴http://jsfiddle.net/vd8ddgra/1/

【讨论】：