wake-up-neo.com

Registrieren des jQuery-Klicks, erster und zweiter Klick

Gibt es eine Möglichkeit, zwei ähnliche Funktionen auszuführen:

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

Ich möchte ein einfaches Toggle-Ereignis verwenden, aber .toggle() wurde nicht mehr empfohlen.

19
user1323595

Versuche dies:

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

Dies basiert auf einer bereits beantworteten Frage: Alternative zur .toggle () - Methode von jQuery, die eventData unterstützt?

44
henser

Oder dieses :

var clicks = 0;

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

dies arbeitete ich für mein Menü 

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

In der unten beschriebenen Methode übergeben wir eine Reihe von Funktionen an unsere benutzerdefinierte Funktion .toggleClick(). Und wir verwenden das data-*-Attribut von HTML5, um den Index der Funktion zu speichern, die bei der nächsten Iteration des Click-Ereignisbehandlungsprozesses ausgeführt wird. Dieser in der data-index-Eigenschaft gespeicherte Wert wird bei jeder Iteration aktualisiert, sodass wir den Index der Funktion verfolgen können, die bei der nächsten Iteration ausgeführt werden soll.

Alle diese Funktionen werden in jeder Iteration des Klickereignisses nacheinander ausgeführt. Zum Beispiel wird die erste Iterationsfunktion bei index[0] ausgeführt, bei der zweiten Iterationsfunktion, die unter index[1] gespeichert ist, wird ausgeführt usw.

In diesem Fall können Sie diesem Array nur zwei Funktionen übergeben. Diese Methode ist jedoch nicht nur auf zwei Funktionen beschränkt. Sie können 3, 4, 5 oder mehr Funktionen in diesem Array übergeben, und diese werden ausgeführt, ohne Änderungen am Code vorzunehmen.

Ein Beispiel im folgenden Snippet behandelt vier Funktionen. Sie können Funktionen nach Ihren eigenen Bedürfnissen übergeben.

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

ich weiß nicht, was Sie versuchen zu tun, aber wir können grundlegende Umschaltung machen 

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

hinweis: Dies funktioniert für ein endloses Klickereignis für dieses Element. Nicht nur für zwei Klicks (falls gewünscht).

ODER Sie können die Klasse css verwenden, um das div auszublenden/anzuzeigen und jquery.toggleClass () zu verwenden.

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

Ich hoffe das war hilfreich für dich ..

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

Wenn Sie buchstäblich nur den ersten und zweiten Klick wünschen:

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

    // First click

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

        // Second click

    });
);
0
Philip Sole