javascript - 注册jQuery点击，第一次和第二次点击

Question

有没有办法运行两个类似的功能：

$('.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);
});

这是基于一个已经回答的问题：Alternative to jQuery's .toggle() method that supports 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 个函数传递给该数组。但这种方法不仅限于两个功能。您可以在此数组中传递 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

如果您实际上只想要第一次和第二次点击：

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

    // First click

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

        // Second click

    });
);

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

            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 9

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

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

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

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

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