自己設計的切換按鈕在密集使用後會減慢我的電腦

Question

我有一組按鈕在我的動態頁面中執行特定操作。我希望這些按鈕中的一些是切換按鈕，因此當我點擊其中一個按鈕時，會將原始圖像轉換爲另一個圖像，再次單擊時，第二個圖像會再次變爲第一個圖像。我決定執行我按鈕功能的div是「.OptLvl3Tack」類。我認爲我可以使用背景CSS屬性更改圖像，但由於CSS只處理僞事件盤旋，訪問，...，但沒有點擊事件，我想我沒有其他選擇比使用Javascript。我設計了這個代碼，可以這樣做：

function IfNoTacked(Tack){ 
    $(Tack).css("background", "url('{{ STATIC_URL }}ThumbTack_Click.png')"); 
    $(Tack).click(function(){IfTacked($(Tack))}); 
} 
function IfTacked(Tack){ 
    $(Tack).css("background", "url('{{ STATIC_URL }}ThumbTack.png')"); 
    $(Tack).click(function(){IfNoTacked($(Tack))}); 
} 
$(".OptLvl3Tack").each(function(){$(this).click(function(){IfNoTacked($(this));})}); 

的代碼工作正常，但是當我點擊一個按鈕，讓我們說，在不到10秒的30倍，我的計算機速度變慢了，所以我必須強制網絡瀏覽器在我的整個電腦崩潰之前關閉。我的桌面是英特爾i3處理器，4GB內存，所以我認爲這個問題與JavaScript的密集使用有關。這是對的嗎？或者是一個DOM相關的問題？ 有沒有不同的方式來使用JavaScript執行此操作？不使用JavaScript？

Answer 1

我認爲你是連接每一次新的單擊處理程序。過了一會兒，你的處理程序將被執行幾次。

嘗試刪除處理程序或記住變量中按鈕的狀態，並確定點擊處理程序要執行的操作。

Answer 2

最有可能是因爲你利用每個。據我所知，你不必使用它：

$(".OptLvl3Tack").click(function() { 
IfNoTacked($(this)); 
}); 

但我會讓所有1個功能：

$(".OptLvl3Tack").click(function() { 
    if($(this).hasClass('active')) { 
     $(this).css("background", "url('{{ STATIC_URL }}ThumbTack.png')"); 
     $(this).removeClass('active') 
    } else { 
     $(this).css("background", "url('{{ STATIC_URL }}ThumbTack_Click.png')"); 
     $(this).addClass('active') 
    } 
});