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

Question

我有一個 div 可以顯示 3 個圖像（在背景中），每個圖像都指示某個變量的“狀態”：即部分、完整和無。 對於這些狀態中的每一個，我都有圖像：partial.gif、full.gif 和 none.gif（即，這些是該 div 的背景圖像）

需要：類似於切換效果的循環隊列，用於按此順序更改圖像部分 -> 完整 -> 無 -> 部分

因此，如果當前圖像是“partial.gif”並且用戶單擊 div，則背景圖像將更改為序列中的下一個，即 full.gif（如果它當前是 full.gif，它會更改為 none.gif 並且到 partial.gif 等等）。

天真的解決方案：擁有一堆 if/else 或 switch-case 並檢查當前一個（圖像），然后根據數組查找決定下一個。 這是最好的方法嗎？ 我可以以某種方式利用 jQuery 的切換 function 嗎？

（PS：它不必限於圖像，但也可以用於不同的背景顏色序列等，我想知道這是一種很好的“通用”方式，即，該示例可能特定於背景圖像，但如果我更改了背景顏色或字體的部分代碼，它仍然可以工作。我不希望它純粹是通用的，但足夠了，因此很容易修改其他屬性。如果沒有，那也很好。 只是一個想法：）

Answer 1

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 中刪除

以下是相關帖子

• fn.toggle(handler(eventObject), handler(eventObject)...) 去哪兒了？
• 在 jquery 更新后切換停止工作

Answer 2

只要它是基於 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 class 應用於元素。 但如果不是這種情況，我相信您可以找到解決方法/調整此問題。

這足夠通用，您可以在不影響腳本功能的情況下更換 CSS class 定義。