javascript - jquery/javascriptでトグルをクリック

Question

テーブル要素をクリックして、最初のクリックで x を実行し、もう一度クリックすると Y を実行したい

<td class='p' id='e1' onclick="myFunction2()"><img src='person2.png'/></td>

それが今ワンクリックでHTMLにあるものですが、アイテムを選択できるように変更したいと思います。選択を解除するためにもう一度クリックすると、別の機能がトリガーされます。

Answer 1

クリックするたびに関数が呼び出されるようにすると仮定します(あなたは言いませんでした) 。

$('#e1').on('click', function() {

    // retrieve current state, initially undefined
    var state = $(this).data('state');  

    // toggle the state - first click will make this "true"
    state = !state; 

    // do your stuff
    if (state) {
        // do this (1st click, 3rd click, etc)
    } else {
        // do that
    }

    // put the state back
    $(this).data('state', state);  
});

これは、jQuery の.data機能を使用して、ボタンのクリック状態をボタン要素自体に保存します。

別の方法として、外部変数を使用することもできますが、変数がグローバル変数にならないように、コールバックをクロージャー (この場合はすぐに呼び出される関数式) で囲む必要があります。

(function() {
    var state;

    $('#e1').on('click', function() {
        state = !state; 
        if (state) {
            // do this (1st click, 3rd click, etc)
        } else {
            // do that
        }
    });
})();

.on呼び出しとstate変数宣言がdocument.ready同じ効果を持つ jQuery ハンドラー内にある場合。

Answer 2

デモ： http： //jsfiddle.net/HJwJf/

トグルメソッドを;にリンクします。

 $("button").toggle(function(){
    $("body").css("background-color","green");},
    function(){
    $("body").css("background-color","red");},
    function(){
    $("body").css("background-color","yellow");}
  );

Answer 3

かなり基本的なことですが、これがあなたの望むものに近いかどうか教えてください。

http://jsfiddle.net/WNJ75/6/

<div id="e1">Click Me</div>

。

(function() {
    var click_track = 1;

        $("#e1").click(function() {
            if (click_track == 1)
              alert("do something");
            else if (click_track == 2) {
               alert("do something else and reset click");
               click_track = 0;
            }

            click_track++;
        });
})();

Answer 4

state変数の使用。変数は、クリックするたびにstate値が入れ替わります。これを利用して、対応する関数を配列で実行できます。01statefn

<td class='p' id='e1'><img src='person2.png'/></td>

$("td#e1.p").each(function(){
  var state = 1, fn = [myFunction1, myFunction2];
  $(this).click(function(){
    return fn[state = 1 - state].apply(this, arguments);
  });
});

また、インライン JavaScript よりも適切なイベント バインディングを使用することをお勧めします。

Answer 5

たとえば、「clickCount」という名前の HTML 要素に新しい属性を作成し、それをイベント ハンドラー内でカウンターとして使用できます。

次のようなボタンがあるとします。

<button data-click-count='0' onclick="myFunction(this)">My Button</button>

そして、次のような関数があります。

function myFunction(elt) {
   // Gets the clicks count
   var count = $(elt).data("click-count");

   // Adds one to the click counter
   $(elt).data("click-count", ++count);  

   if (count == 1)
      doSomething();
   else if (count == 2)
      doSomethingElse();
}

ボタンをクリックするたびに、クリック数を含むアラートが表示されます。

同じ方法を使用して、ケースに適用できます。