单击jquery/javascript切换

Click toggle with jquery/javascript

本文关键字：切换 javascript jquery 单击      更新时间：2023-09-26

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

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

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

我要假设（你没有说）你希望每次点击都能调用函数来替换：

$('#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处理程序内部，则会产生相同的效果。

非常基本，请告诉我这是否符合您的要求。

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

演示：http://jsfiddle.net/HJwJf/

将切换方法与链接；

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

您可以在名为"clickCount"的HTML元素上创建一个新的atribute，并将其用作事件处理程序中的计数器。

假设你有一个像这样的按钮：

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

每次单击该按钮，您都会看到一个包含您所单击次数的警报。

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

使用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相比，最好使用适当的事件绑定。

相关文章：