如何在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);
});