Javascript 注册jQuery点击，第一次和第二次点击

Registering jQuery click, first and second click

提问by henser

Is there a way to run two functions similar to this:

有没有办法运行两个与此类似的函数：

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

I want to use a basic toggle event, but .toggle()has been deprecated.

我想使用基本的切换事件，但.toggle()已被弃用。

回答by henser

Try this:

尝试这个：

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

This is based on an already answered question: Alternative to jQuery's .toggle() method that supports eventData?

这是基于一个已经回答的问题：Alternative to jQuery's .toggle() method that support eventData?

回答by Stevens

Or this :

或这个 ：

var clicks = 0;

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

回答by Davincho

this I worked for my menu

这是我为我的菜单工作的

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);
        });

回答by bipen

i don't know what you are tryin to do but we can get basic toggle by

我不知道你想做什么，但我们可以通过以下方式获得基本的切换

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

note: this works for endless click event for that element .. not just for two clicks (if that is what you want)

注意：这适用于该元素的无限点击事件......不仅仅是两次点击（如果这是你想要的）

OR you can use css class to hide/show the div and use jquery.toggleClass()

或者您可以使用 css 类来隐藏/显示 div 并使用jquery.toggleClass()

回答by Mohammad Usman

In the method mentioned below We are passing an array of functions to our custom .toggleClick()function. And We are using data-*attribute of HTML5to store index of the function that will be executed in next iteration of click event handling process. This value, stored in data-indexproperty, is updated in each iteration so that we can track the index of function to be executed in next iteration.

在下面提到的方法中，我们将一个函数数组传递给我们的自定义.toggleClick()函数。并且我们使用data-*of 属性HTML5来存储将在单击事件处理过程的下一次迭代中执行的函数的索引。该值存储在data-index属性中，在每次迭代中都会更新，以便我们可以跟踪要在下一次迭代中执行的函数的索引。

All of these functions will be executed one by one in each iteration of click event. For example in first iteration function at index[0]will be executed, in 2nd iteration function stored at index[1]will be executed and so on.

所有这些函数都会在点击事件的每次迭代中一一执行。例如在第一个迭代函数中 atindex[0]将被执行，在第二个迭代函数中存储的 atindex[1]将被执行等等。

You can pass only 2 functions to this array in your case. But this method is not limited to only 2 functions. You can pass 3, 4, 5 or more functions in this array and they will be executed without making any changes in code.

在您的情况下，您只能将 2 个函数传递给此数组。但这种方法不仅限于 2 个功能。您可以在此数组中传递 3、4、5 或更多函数，它们将在不更改代码的情况下执行。

Example in the snippet below is handling four functions. You can pass functions according to your own needs.

下面片段中的示例处理四个函数。您可以根据自己的需要传递函数。

$.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>

回答by Mohideen Asraf

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;
     });
});

I hope this was helpful to you..

我希望这对你有帮助..

回答by Philip Sole

If you literally only want the first and second click:

如果你真的只想要第一次和第二次点击：

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

    // First click

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

        // Second click

    });
);

回答by Seba Rossi

I reach here looking for some answers, and thanks to you guys I′ve solved this in great manner I would like to share mi solution.

我来到这里寻找一些答案，感谢你们，我已经很好地解决了这个问题，我想分享我的解决方案。

I only use addClass, removeClass and hasClass JQuery commands.

我只使用 addClass、removeClass 和 hasClass JQuery 命令。

This is how I′ve done it and it works great:

我就是这样做的，而且效果很好：

$('.toggle').click(function() { 
            if($('.categ').hasClass("open")){
                $('.categ').removeClass('open');
            }
            else{           
                $('.categ').addClass('open');                                   
            }
        });

This way a class .open is added to the Html when you first clikc. Second click checks if the class exists. If exists it removes it.

这样，当您第一次单击时，类 .open 会添加到 Html。第二次单击检查该类是否存在。如果存在，则将其删除。

回答by Manoj Khuntwal

            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++;
            });