javascript - jQueryクリック、1回目および2回目のクリックの登録

Question

これに似た2つの関数を実行する方法はありますか？

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

これは、すでに回答されている質問に基づいています。eventDataをサポートするjQueryの.toggle（）メソッドの代わりになりますか？

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

注：これは、その要素のエンドレスクリックイベントで機能します.. 2回のクリックだけでなく（それが必要な場合）

または、cssクラスを使用してdivを非表示/表示し、jquery.toggleClass（）を使用できます

Answer 5

以下で説明する方法では、関数の配列をカスタム関数に渡し.toggleClick()ます。data-*また、の属性を使用してHTML5、クリックイベント処理プロセスの次の反復で実行される関数のインデックスを格納しています。プロパティに格納されているこの値はdata-index、各反復で更新されるため、次の反復で実行される関数のインデックスを追跡できます。

これらの関数はすべて、クリックイベントの各反復で1つずつ実行されます。たとえば、最初の反復ではで関数atindex[0]が実行され、2番目の反復ではで格納された関数index[1]が実行されます。

あなたの場合、この配列に渡すことができる関数は2つだけです。ただし、この方法は2つの機能に限定されません。この配列で3、4、5以上の関数を渡すことができ、コードを変更せずに実行されます。

以下のスニペットの例は、4つの関数を処理しています。必要に応じて関数を渡すことができます。

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

文字通り1回目と2回目のクリックのみが必要な場合：

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

    // First click

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

        // Second click

    });
);

Answer 7

            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 8

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 9

私はいくつかの答えを探してここに到達します、そして皆さんのおかげで私はこれを素晴らしい方法で解決しました私はmiの解決策を共有したいと思います。

私はaddClass、removeClass、hasClassJQueryコマンドのみを使用しています。

これは私がそれをした方法であり、それはうまく機能します：

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

このようにして、最初にクリックしたときにクラス.openがHtmlに追加されます。2回目のクリックで、クラスが存在するかどうかを確認します。存在する場合は削除します。