Rejestrowanie jQuery click, pierwsze i drugie kliknięcie

Question

Czy istnieje sposób, aby uruchomić dwie funkcje podobne do tego:

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

chcę użyć podstawowego zdarzenie przełączania, ale .toggle() została zaniechana.

Answer 1

Spróbuj tego:

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

ta opiera się na już odpowiedział na pytanie: Alternative to jQuery's .toggle() method that supports eventData?

Answer 2

Albo to:

var clicks = 0; 

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

Answer 3

Nie wiem, co masz do zrobienia, ale próbują możemy uzyskać podstawowe przełączenie przez

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

uwaga: ta działa dla niekończącej kliknij zdarzenie dla tego elementu .. nie tylko dla dwóch kliknięć (jeśli to, co chcesz)

lub można użyć klasy css, aby ukryć/pokazać div i użyć jquery.toggleClass()

Answer 4

to pracowałem dla mojego 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); 
     }); 

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

W metodzie opisanej poniżej Mijamy tablicę funkcji do naszego zwyczaj .toggleClick() funkcji. I używamy atrybutu data-* z HTML5 do przechowywania indeksu funkcji, która będzie wykonywana w następnej iteracji procesu obsługi zdarzenia kliknięcia. Ta wartość, przechowywana we właściwości data-index, jest aktualizowana w każdej iteracji, dzięki czemu możemy śledzić indeks funkcji do wykonania w kolejnej iteracji.

Wszystkie te funkcje będą wykonywane jeden po drugim w każdej iteracji zdarzenia kliknięcia. Na przykład w pierwszej funkcji iteracji pod adresem index[0] zostanie wykonana, w drugiej iteracji funkcja zapisana pod numerem index[1] zostanie wykonana i tak dalej.

Możesz przekazać tylko 2 funkcje do tej tablicy w twoim przypadku. Ale ta metoda nie jest ograniczona tylko do 2 funkcji. Możesz przekazać 3, 4, 5 lub więcej funkcji w tej tablicy i będą one wykonywane bez wprowadzania zmian w kodzie.

Przykład w poniższym fragmencie zawiera cztery funkcje. Możesz przekazywać funkcje zgodnie z własnymi potrzebami.

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