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 变量声明位于 jQuery document.ready 处理程序内，则具有相同的效果。