點擊使用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功能將按鈕的單擊狀態存儲在button元素本身中。

另外，您可以使用一個外部變量，但是您應該將回調函數括在一個閉包中（在這種情況下為立即調用的函數expression ），以防止該變量成為全局變量：

(function() {
    var state;

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

如果.on調用和state變量聲明位於jQuery document.ready處理程序內，則將具有相同的效果。

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

您可以在HTML元素上創建一個新的屬性，例如“ clickCount”，並將其在事件處理程序中用作計數器。

假設您有一個像這樣的按鈕：

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

每次單擊該按鈕時，您都會看到一條警告，其中包含您的點擊次數。

您可以使用相同的方法並將其應用於您的案例。

Answer 5

使用state變量。 每次點擊時， state變量將在值0和1之間交換。 利用state我們可以在fn數組中執行相應的功能。

<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。