使用javascript/jQuery實現多路切換的最佳方式是什麼？

我有一個div可以顯示3個圖像（在後臺），每個圖像都指示一些變量的'狀態'：即部分，全部和無。對於這些狀態中的每一個，我都有圖像：partial.gif，full.gif和none.gif（即，這些是該div的背景圖像）使用javascript/jQuery實現多路切換的最佳方式是什麼？

需要：循環隊列類似切換效果， - >全部 - >無 - >部分

所以，如果當前圖像是'partial.gif'，並且用戶點擊div，背景圖像會變爲序列中的下一個圖像，即full.gif（如果它目前full.gif變爲none.gif和那partial.gif等等）。天真的解決方案：有一堆if/else或switch-case並檢查當前的（image），然後根據數組查找哪一個是下一個。這是做這件事的最好方法嗎？我能否以某種方式利用jQuery的切換功能？（PS：它不需要限制在圖像上，但也可以用於不同的背景顏色序列等，我想知道它是一種很好的「通用」方法，例如，特定於背景圖像，但如果我更改了背景顏色或字體代碼的一部分，它應該仍然可以工作，我不希望它是純粹的通用的，但只是足夠容易修改其他屬性。，那也沒關係只是一個想法:)

來源

2011-07-10 PhD

http://api.jquery.com/toggle-event/

準確地說http://api.jquery.com/toggle-event/#example-0 沒有你想要的到底是什麼？

$("#div1").toggle(
    function() { 
    $(this).css("background-image","url(full.png)") 
    }, 
    function() { 
    $(this).css("background-image","url()") 
    }, 
    function() { 
    $(this).css("background-image","url(partial.png)") 
    } 
});

UPDATE fn.toggle從jQuery的

刪除

以下是有關職位

來源

2011-07-10 12:50:07 mplungjan

Neat !!我也查了api參考。但是一個令人遺憾的問題是：這個函數列表可以任意長嗎？我的意思是有4-5'function（）{...}？ – PhD

是的。任何長度，但他們將按輸入的順序執行。 – mplungjan

沒關係，找到它:)以下是api doc所說的「如果提供了兩個以上的處理程序，則.toggle（）將在所有這些處理程序之間循環，例如，如果有三個處理程序，則將調用第一個處理程序第一次點擊，第四次點擊，第七次點擊等._「 – PhD

只要它是一個基於CSS的解決方案（在那裏你可以切換類），你可以做這樣的事情（未測試的代碼）：

$('#element').click(function() { 
    // get current css class value. 
    var class = $(this).attr('class'); 

    // determine/increment number. 
    var nextNumber = parseInt(class.charAt(class.length - 1)) + 1; 

    // if too high, reset to first one. 
    if (nextNumber > 3) { 
    nextNumber = 1; 
    } 

    // remove old class and add new class. 
    $(this).removeClass(class).addClass('my_class' + nextNumber); 
});

這裏假設您一次只有一個CSS類應用於元素。但如果情況並非如此，我相信你可以找到一個解決方法/調整。

這只是通用的，可以在不影響腳本功能的情況下換出CSS類定義。

來源

2011-07-10 12:44:46 Kon

是有道理的，但IMO @ mplungjan的解決方案是更清潔，是jQuery的API的一部分 - 我不知道那:)但是它的算法再造防止:) – PhD

啊，你知道什麼..我不知道切換可能有兩個以上的狀態。這是我的一個疏忽。但是，我仍然寧願使用類名，而不是自己的具體樣式。所以，如果我是你，我會使用@ mplungjan的解決方案，但要刪除/添加類。 – Kon

如果jQuery的切換無法解決您的問題，例如在使用keydown而不是單擊或委託另一個事件的切換時，想到自定義解決方案會很有幫助。 –

使用javascript/jQuery實現多路切換的最佳方式是什麼？

回答

相關問題