注册jQuery的点击,第一和第二点击(Registering jQuery click, firs

2019-07-20 00:57发布

有没有一种方法来运行类似这样的两个功能:

$('.myClass').click(
    function() {
        // First click
    },
    function() {
        // Second click
    }
);

我想用一个基本的触发事件,但.toggle()已被弃用。

Answer 1:

试试这个:

$('.myClass').click(function() {
  var clicks = $(this).data('clicks');
  if (clicks) {
     // odd clicks
  } else {
     // even clicks
  }
  $(this).data("clicks", !clicks);
});

这是基于已经回答的问题: 替代jQuery的.toggle()方法支持EVENTDATA?



Answer 2:

或这个 :

var clicks = 0;

$('.myClass').click(function() {
    if (clicks == 0){
        // first click
    } else{
        // second click
    }
    ++clicks;
});


Answer 3:

这个我曾在我的菜单

var SubMenuH = $('.subBoxHederMenu').height();  
var clicks = 0;

        $('.btn-menu').click(function(){
          if(clicks == 0){
            $('.headerMenu').animate({height:SubMenuH});
            clicks++;
            console.log("abierto");
          }else{
            $('.headerMenu').animate({height:"55px"});
            clicks--;
            console.log("cerrado");
          }
          console.log(clicks);
        });


Answer 4:

我不知道你在试着做什么,但我们可以得到基本的切换

$('.myClass').click({
   var $this=$(this);        
   if($this.is(':hidden'))
    {
      $this.show('slow');
    }else{
      $this.hide('slow');
    }
 })

注意:这适用于无休止的单击事件为元素..不只是两次点击(如果这是你想要的)

或者您也可以使用CSS类隐藏/显示div和使用jquery.toggleClass()



Answer 5:

在该方法中提到下面我们传递函数数组到我们的定制.toggleClick()函数。 而我们使用data-*的属性, HTML5存储将在点击事件处理过程中的下一个迭代被执行的函数的索引。 此值时,存储在data-index属性,在每次迭代中被更新,以便我们可以跟踪的功能在下一迭代中执行的索引。

所有这些功能都将通过一个在点击事件的每个迭代执行一个。 例如,在第一次迭代函数在index[0]将被执行,在存储在第二迭代函数index[1]将被执行,等等。

您可以通过仅2个功能,以这个数组,你的情况。 但这种方法并不限于仅2的功能。 可以将此数组中传递3,4,5或更多的功能,他们将不使在代码的任何变化来执行。

在下面的代码段实施例是处理四种功能。 您可以根据自己的需要传递的功能。

 $.fn.toggleClick = function(funcArray) { return this.click(function() { var elem = $(this); var index = elem.data('index') || 0; funcArray[index](); elem.data('index', (index + 1) % funcArray.length); }); }; $('.btn').toggleClick([ function() { alert('From Function 1'); }, function() { alert('From Function 2'); }, function() { alert('From Function 3'); }, function() { alert('From Function 4'); } ]); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <button type="button" class="btn">Click Me</button> <button type="button" class="btn">Click Me</button> 



Answer 6:

            var click_s=0;
            $('#show_pass').click(function(){
                if(click_s % 2 == 0){
                    $('#pwd').attr('type','text');
                    $(this).html('Hide');
                }
                else{
                    $('#pwd').attr('type','password');
                    $(this).html('Show');
                }
                click_s++;
            });


Answer 7:

When You click the selector it automatically triggers second and waiting for another click event.

$(selector).click(function(e){
    e.preventDefault(); // prevent from Posting or page loading
     //do your stuff for first click;
     $(this).click(function(e){
     e.preventDefault();// prevent from Posting or page loading
      // do your stuff for second click;
     });
});

我希望这是对你有帮助..



Answer 8:

如果你从字面上只希望在第一和第二点击:

$('.myClass').one( 'click', function() {

    // First click

    $('.myClass').one( 'click', function() {

        // Second click

    });
);


文章来源: Registering jQuery click, first and second click