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变量声明在一个 jQuerydocument.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

您可以在名为“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();
}

每次单击该按钮时，您都会看到一条提示，其中包含您的点击次数。

您可以使用相同的方法并将其应用于您的案例。

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。