单击元素时调用的切换函数？

Question

为什么当我第一次点击跨度时，它会调用函数a和b，如何在第一次单击时调用函数a并在第二次单击时调用函数b？

function a(id) {
    $.post("url.php", {'id':id}, function() {
        $(".aa"+id).removeAttr('onclick');
        $(".aa"+id).attr('onclick', b(id);
    );
}
function b(id) {
    $.post("url.php", {'id':id}, function() {
        $(".aa"+id).removeAttr('onclick');
        $(".aa"+id).attr('onclick', a(id);
    );
}

<span class="aa '.$item['id'].'"  onclick="a(' . $item['id'] . ')">A</span>

Answer 1

您可以通过使用Javascript附加事件并切换类以确定应调用哪个函数来更简单地实现此目的。 尝试这个：

<span class="a toggle" data-id="'.$item['id'].'">A</span>

$(function() {
    $('.toggle').click(function() {
        $(this).toggleClass('a b');
    });

    $(document).on('click', '.toggle.a', function() {
        var $el = $(this);
        $.post("url.php", { id: $el.data('id') }, function() {
            // do something when .a clicked...
        });
    });

    $(document).on('click', '.toggle.b', function() {
        var $el = $(this);
        $.post("url.php", { id: $el.data('id') }, function() {
            // do something when .b clicked...
        });
    });
});

示例小提琴

我假设您的生产代码中的实际a()和b()函数的逻辑是不同的......

Answer 2

您可以使用$.data()来存储执行的函数，并通过参考它，您可以调用所需的函数，如下所示：

 function a() { alert("function A"); } function b() { alert("function B"); } $(document).ready(function(){ $("span.aa").click(function(){ var prevCalledFunction = $(this).data("function"); if(prevCalledFunction == null || prevCalledFunction == "B"){ a(); $(this).data("function","A"); } else{ b(); $(this).data("function","B"); } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <span class="aa">A</span> 

Answer 3

做这样的事情，只需在span元素上设置一个属性，以显示它是否第一次被点击，如果是，则选择你想要的第二个函数。 然后假设在第二次单击后，第三次单击应该返回到第一个功能，依此类推。

 $(document).ready(function() { $("span.aa").click(function() { //checking if the span has been clicked before since the page was loaded via if it has the attribute "checked_before" if ($(this).is('[check_before]') == false) { alert("Just called function a"); //a(id); $(this).attr("check_before", "true"); } else if ($(this).is('[check_before]') == true) { alert("just called function b"); //b(id); $(this).removeAttr("check_before"); } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script><span class='aa'>Click me </span>