如何在jquery中使用toggle执行两个功能？

Question

我使用toggle（）函数执行两个函数。 当我单击带有class =“ favourite”的图像时，第一次单击时，必须执行第一个函数，并且我应该得到alert（'test1'）；对于第二次单击，必须执行第二个函数，并且应该得到警报（'test2'），执行必须在此处停止。

我的问题是，当第二次单击该图像时，我得到的是alert（'test2'），然后是alert（'test1'），则只应执行第二个函数才能进行第二次单击，即我应该仅获得alert（' test2'）。 如何在第二次单击时停止执行第一个功能？

这是我在index.phtml文件中的jquery代码：

jqry("#wrap").delegate('img.favourite','click',function(){ 
    var id = jqry(this).attr('pid');
    jqry('#'+id).toggle(function(){
            alert('test1');     
        },
        function(){
            alert('test2');
        }
    );
});

这是我在JS文件中的代码

    <img class="favourite"  src="images/fav.png" alt="favourite" pid ='project_id'>

我第一次点击的输出是test1

我第二次点击的输出是test2 test1

第二次单击时，我应该获得输出警报test2并停止执行，但是它将进一步执行先前的功能并给出两个警报，即test2后跟test1 。 我该如何解决？

Answer 1

您正在使用的.toggle()格式在jQuery 1.8中已弃用，在1.9中已删除。 另外，它每次单击都绑定一个单击处理程序，因此您确实不想多次调用它，这可能是为什么您会看到两个警报的原因，因为每次绑定它时，单击都会获得一个回调。 第一个，然后两个，然后三个，依此类推...

我建议您在每次点击时找到一种不同的交替功能方式。 也许只需使用.data()在项目上设置一个标志，然后根据该标志进行替换。

尚不清楚您要使用id元素上的.toggle()函数做什么，但这将使您交替调用函数，然后可以在每个函数中实现所需的任何功能：

jqry("#wrap").delegate('img.favourite', 'click', function() { 
    var toggle = $(this).data("toggleFlag") || false;
    var id = jqry(this).attr('pid');
    if (toggle) {
         // do whatever you want with id here
         alert("test1");
    } else {
         // do whatever you want with id here
         alert("test2");
    }
    // reverse the toggle flag
    $(this).data("toggleFlag", !toggle);
});