Question

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

$(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 Link：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

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

如果你试图让每第二次点击执行第二个功能（即偶数次点击），并在奇数次点击上执行第一个功能，那么为什么不使用计数器？

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

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

(function(){
    var count = 0;

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

使用count。

<强> FIDDLE

P.S。这个东西可以在没有jQuery的情况下完成。 http://youmightnotneedjquery.com/

Answer 6

简单方法：

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

小提琴：

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

Answer 7

使用递增变量？

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

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

Answer 8

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

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

触发第二个.click功能

8 个答案: