Đăng ký jQuery nhấp chuột, đầu tiên và thứ hai nhấp chuột

Question

Có cách nào để chạy hai chức năng tương tự như sau:

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

Tôi muốn sử dụng một sự kiện chuyển đổi cơ bản, nhưng .toggle() đã bị phản đối.

Answer 1

Hãy thử điều này:

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

này được dựa trên một câu hỏi đã được trả lời: Alternative to jQuery's .toggle() method that supports eventData?

Answer 2

Hoặc này:

var clicks = 0; 

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

Answer 3

tôi không biết những gì bạn đang tryin để làm nhưng chúng tôi có thể chuyển đổi cơ bản theo số

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

lưu ý: đây làm việc cho sự kiện click vô tận cho yếu tố đó .. không chỉ dành riêng cho hai lần nhấp chuột (nếu đó là những gì bạn muốn)

HOẶC bạn có thể sử dụng lớp css để ẩn/hiển thị các div và sử dụng jquery.toggleClass()

Answer 4

tôi này làm việc cho trình đơn của tôi

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 5

  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 6

trong phương pháp đề cập dưới đây Chúng tôi đang đi qua một loạt các chức năng để tùy chỉnh chức năng .toggleClick() của chúng tôi. Và chúng tôi đang sử dụng thuộc tính data-* của HTML5 để lưu trữ chỉ mục của hàm sẽ được thực hiện trong lần lặp tiếp theo của quá trình xử lý sự kiện nhấp chuột. Giá trị này, được lưu trữ trong thuộc tính data-index, được cập nhật trong mỗi lần lặp để chúng ta có thể theo dõi chỉ mục của hàm được thực hiện trong lần lặp tiếp theo.

Tất cả các chức năng này sẽ được thực hiện từng cái một trong mỗi lần lặp lại sự kiện nhấp chuột. Ví dụ trong hàm lặp đầu tiên tại index[0] sẽ được thực hiện, trong hàm lặp thứ hai được lưu trữ tại index[1] sẽ được thực hiện và cứ như vậy.

Bạn chỉ có thể chuyển 2 hàm vào mảng này trong trường hợp của bạn. Nhưng phương pháp này không chỉ giới hạn ở 2 chức năng. Bạn có thể vượt qua các hàm 3, 4, 5 hoặc nhiều hơn trong mảng này và chúng sẽ được thực hiện mà không thực hiện bất kỳ thay đổi nào trong mã.

Ví dụ trong đoạn mã dưới đây đang xử lý bốn chức năng. Bạn có thể chuyển các chức năng theo nhu cầu của riêng bạn.

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