单击使用 jquery/javascript 切换答案

【问题标题】：Click toggle with jquery/javascript单击使用 jquery/javascript 切换
【发布时间】：2013-02-14 19:42:31
【问题描述】：

我想单击一个表格元素并让它在第一次单击时执行 x，如果再次单击则执行 Y

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

这就是我刚才单击的 HTML 的内容，但我希望更改它以便可以选择一个项目，然后如果再次单击以取消选择，它将触发不同的功能。

【问题讨论】：

标签： javascript jquery html web

【解决方案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 变量声明位于具有相同效果的jQuery document.ready 处理程序中。

【讨论】：

+1 一步一步。我想您可以将此答案添加到书签中，以获取如此多的重复项...
自 .toggle() 已弃用以来通过点击切换的最佳答案

【解决方案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");}
  );

【讨论】：

这个版本的.toggle 在 jQuery 1.8 中被弃用，在 jQuery 1.9 中被移除

【解决方案3】：

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

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

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

【讨论】：

您不应将数据存储在 DOM 中的任意 HTML 属性中。 HTML5 有 data-XXX 属性，而 jQuery 有 .data()。在任何一种情况下，更改的数据都存储为元素的属性（不是属性），并且不会更改 DOM HTML 源代码。

【解决方案4】：

非常基本，如果这接近您想要的，请告诉我。

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

【讨论】：

@Alnitak 好的，然后改成别的。
那不是我的意思。实际上，如果没有此代码在某种其他类型的闭包中，您的 click_track 变量将成为全局变量。全局变量不好。
@Alnitak 为您修复了它。

【解决方案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。

【讨论】：