web-dev-qa-db-fra.com

Enregistrement de jQuery click, premier et deuxième clic

Est-il possible d’exécuter deux fonctions semblables à celle-ci:

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

Je souhaite utiliser un événement basique, mais .toggle() est obsolète.

javascriptjqueryclick
19
user1323595

Essaye ça:

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

Ceci est basé sur une question déjà répondue: Alternative à la méthode .toggle () de jQuery qui prend en charge eventData?

44
henser

Ou ca :

var clicks = 0;

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

cela j'ai travaillé pour mon 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);
        });
5
Davincho

Dans la méthode mentionnée ci-dessous, nous transmettons un tableau de fonctions à notre fonction personnalisée .toggleClick(). Et nous utilisons l'attribut data-* de HTML5 pour stocker l'index de la fonction qui sera exécutée lors de la prochaine itération du processus de traitement des événements de clic. Cette valeur, stockée dans la propriété data-index, est mise à jour à chaque itération afin que nous puissions suivre l'index de la fonction à exécuter lors de la prochaine itération.

Toutes ces fonctions seront exécutées une par une à chaque itération de l'événement click. Par exemple, dans la première itération, la fonction at index[0] sera exécutée, dans la deuxième itération, la fonction stockée dans index[1] sera exécutée, etc.

Vous ne pouvez transmettre que 2 fonctions à ce tableau dans votre cas. Mais cette méthode n'est pas limitée à 2 fonctions. Vous pouvez passer 3, 4, 5 fonctions ou plus dans ce tableau et elles seront exécutées sans modifier le code.

Exemple dans l'extrait ci-dessous gère quatre fonctions. Vous pouvez passer des fonctions selon vos propres besoins.

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

2
Mohammad Usman

je ne sais pas ce que vous essayez de faire, mais nous pouvons obtenir de base bascule par 

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

remarque: cela fonctionne pour un événement de clics sans fin pour cet élément .. pas seulement pour deux clics (si c'est ce que vous voulez)

OU vous pouvez utiliser la classe css pour masquer/afficher la div et utiliser jquery.toggleClass ()

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

J'espère que cela vous a été utile.

0
Mohideen Asraf
            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++;
            });
0
Manoj Khuntwal

Si vous ne voulez littéralement que le premier et le deuxième clic:

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

    // First click

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

        // Second click

    });
);
0
Philip Sole