javascript - jquery如何将两个选择器组合到单个切换事件的第二个功能

Question

如果我有一个绑定到点击事件的常规切换功能

$('#work-content a').toggle(
    function() {
        // first click stuff
    }, function() {
        // second click stuff
    }
);

但是，我还需要以$(document).click某种方式将事件绑定到第二个函数。我的逻辑可能是错误的，所以我确信需要一个新的解决方案。

功能是 1）在单击链接时执行某些操作，然后 2）在再次单击链接或单击#work-contentdiv 外部时执行相反的操作。

Answer 1

切换功能用于隐藏/显示您的 div，不应用于维护事件的状态。只需为此使用另一个局部变量并定义两个函数来执行您的两个不同操作并将函数指针作为回调传递给您的事件侦听器。

因此：

var linkClicked=false;

function fun1(){}

function fun2(){}

$('#work-content a').click(
    function() {
        if(!linkClicked)
          fun1();
        else
          fun2();
    });
$("body").click(function(){
  if($(event.target).closest("#work-content")===null)  //to make sure clicking inside your div does not trigger its close
  {
    fun2();
  }
});

Answer 2

只需提取匿名函数并为其命名：

var thatFunction = function () {
    ...
}

$('#work-content a').toggle(
    function() {
        // first click stuff
    },
    thatFunction);

$(document).click(thatFunction);

Answer 3

linkClicked = false;    
$('#work-content .pic a').click(function(event) {
    event.preventDefault();

    var c = $(this);

    if (!linkClicked) {
        values = workOpen($(this));
    } else {
        workClose(c, values);
    }

    $('body').one('click',function() {
        workClose(c, values);
    });

});

这个解决方案正是我所需要的。