触发第二个 .click 函数

Question

我认为这是一个非常新手的问题，但是在第一次和第二次点击时是否可以在 .click 上有 2 个单独的功能？

$(div).click(function(){
    alert("1st click");
},
function(){
    alert("2nd click");
});

http://jsfiddle.net/2xe8a/

或者有什么建议可以分开这个功能？

谢谢大家！

Answer 1

好的，第一次点击的时候设置一下，第二次检查一下

$('div').click(function(){
    var clicked = $(this).data('clicked');

    if ( clicked ) {
        alert('the rest of the time');
    }else{
        alert('first time');
    }

    $(this).data('clicked', !clicked);
});

FIDDLE

Answer 2

一种方法是在第一次点击时解除绑定：

function click1 () {
    alert('1st click');
    $(this).off('click', click1).on('click', click2);
}
function click2 () {
    alert('2nd click');
}

$(function () {
    $('#click').on('click', click1);
});

更新的 JSFiddle：http://jsfiddle.net/2xe8a/1/

另一种选择是使用包装方法来确定应该触发哪个方法：

function click1 () {
    alert('1st click');
}
function click2 () {
    alert('2nd click');
}

$(function () {
    $('#click').data('clicks', 0).on('click', function () {
        var $this = $(this),
            clicks = $this.data('clicks') + 1;
        switch (clicks) {
            case 1: click1.call(this); break;
            case 2: click2.call(this); break;
        }
        $this.data('clicks', clicks);
    });
});

更新的 JSFiddle：http://jsfiddle.net/2xe8a/6/

编辑：根据 Juhana 的建议，第三个选项可能如下所示：

function click2 () {
    alert('2nd click');
}

$(function () {
    $('#click').one('click', function () {
        alert('1st click');
        $(this).one('click', click2);
    });
});

JSFiddle 链接：http://jsfiddle.net/2xe8a/8/

Answer 3

如果您只希望每个函数发生一次，您可以使用one 而不是on（而且，我总是使用on('click') 之类的东西而不是快捷方式click() 方法）：

$("#click").one('click', function(){
  alert("1st click");
  $("#click").one('click', function(){
    alert("2nd click");
  });
});

如果您需要更多地控制触发哪个事件，您可以使用on 然后off 取消绑定事件处理程序：

$("#click").on('click', function(){
  alert("1st click");
  $("#click").off('click');
  $("#click").on('click', function(){
    alert("2nd click");
    $("#click").off('click');
  });
});

如果你想用变量来做，你可以这样做：

var firstClick = true;
$("#click").on('click', function(){
  if (firstClick) {
     alert("1st click");
     firstClick = false;
  }
  else {
    alert("2nd click");
  }
});

Answer 4

我不确定你到底想做什么。

如果您试图让第二个函数在每 2 次点击（即偶数次点击）时执行，并在奇数次点击时执行第一个函数，那么为什么不使用计数器呢？

这是一个非常简单的例子，但我认为它说明了原理：

var count = 0;
$("#click").click(function(){
    if (count % 2 === 0) {
        oddNumberOfClicks();
    }
    else {
        evenNumberOfClicks();
    }

    count++;
});

function oddNumberOfClicks() {
    alert('Doing some work for odd');
}

function evenNumberOfClicks() {
    alert('Doing some work for even');
}

http://jsfiddle.net/2xe8a/4/

Answer 5

使用递增变量？

clicks = 0;
$(div).click(function(){

  clicks = clicks +1; // clicks++
  if ( clicks == 1 ) {
    alert("1st click");
  } else if ( clicks == 2 ) {
    alert("2nd click");
  } else {
     //...
  }
});

Answer 6

(function(){
    var count = 0;

    $("#click").click(function(e){
        if(count % 2 == 0){
            count++;
            alert(1);
            // first click
        }else{
            count++;
            alert(2);
            // second click
        }
    });
});

使用counter。

FIDDLE

附：这件事可以在没有 jQuery 的情况下完成。 http://youmightnotneedjquery.com/

Answer 7

简单的方法：

var t = false;
$("#click").click(
    function(){
        if(!t){
            alert("1st click");
            t = true;
        } else {
            alert("2st click");
        }
      }
);

小提琴：

http://jsfiddle.net/2xe8a/9/

Answer 8

第二次点击是指双击吗？如果是这样，jQuery中有一个双击方法：

$(div).dblclick( function() {
    alert("asdf");
});