web-dev-qa-db-ja.com

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

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

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

基本的なトグルイベントを使用したいのですが、.toggle()は廃止されました。

javascriptjqueryclick
20
user1323595

これを試して：

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

これはすでに回答済みの質問に基づいています： eventDataをサポートするjQueryの.toggle（）メソッドの代替？

50
henser

またはこれ：

var clicks = 0;

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

これはメニューのために働いた

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

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

これらの関数はすべて、クリックイベントの反復ごとに1つずつ実行されます。たとえば、最初の反復関数ではindex[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>
2
Mohammad Usman

あなたが何をしようとしているのかわかりませんが、基本的なトグルを取得できます

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

注：これは、2回のクリックだけではなく、その要素の無限クリックイベントに対して機能します（必要な場合）。

または、cssクラスを使用してdivを非表示/表示し、 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;
     });
});

これがお役に立てば幸いです。

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

文字通り最初と2番目のクリックのみが必要な場合：

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

    // First click

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

        // Second click

    });
);
0
Philip Sole