在多個國家之間切換的最佳策略？

我目前有三類：a,b和c。在多個國家之間切換的最佳策略？

元素一次只能有這些類中的一個。

我目前的做法是簡單地調用每次需要一個類變化的時間如下：

$('#element').addClass('a').removeClass('b c');

還有其他的方法來達到同樣的效果 - 但使用屬性選擇，例如，可能更貴從長遠來看。這不是一個三態週期，因爲我有時需要切換a到b或，反之亦然。我的上述方法在性能方面是最有效的策略嗎？如果不是，有什麼更好的，或者我可以尋找什麼條件來指向正確的方向？

來源

2013-12-10 interpolack

首先，除非你一次做了幾千次，否則我很懷疑調用.removeClass('b c')的性能會更明顯。我的一般原則是寫用以下優先權代碼依次爲：

正確性
可讀性和可維護性
高效/緊湊型
性能

我只有每花費任何開發週期如果我發現了一個合法的性能問題，並且已經對哪些代碼需要改進並且能夠衡量我是否是indee實際上改善它。

如果你有對象沒有其他類，那麼最簡單的方法是隻設置新的類名稱：

$('#element').attr('class', 'a');

如果你在對象上有其他的類名，你事先知道這些是什麼，那麼你可以這樣做：

$('#element').attr('class', 'a ' + otherClassNmes);

如果你不想承擔的其他類名任何先驗知識，那麼你就需要尋找兩者的其他類名，如果刪除它們當下。你可以看看jQuery的代碼.removeClass()，看看它究竟做了什麼。

removeClass: function(value) { 
    var classes, elem, cur, clazz, j, 
     i = 0, 
     len = this.length, 
     proceed = arguments.length === 0 || typeof value === "string" && value; 

    if (jQuery.isFunction(value)) { 
     return this.each(function(j) { 
      jQuery(this).removeClass(value.call(this, j, this.className)); 
     }); 
    } 
    if (proceed) { 
     classes = (value || "").match(core_rnotwhite) || []; 

     for (; i < len; i++) { 
      elem = this[ i ]; 
      // This expression is here for better compressibility (see addClass) 
      cur = elem.nodeType === 1 && (elem.className ? 
       (" " + elem.className + " ").replace(rclass, " ") : 
       "" 
      ); 

      if (cur) { 
       j = 0; 
       while ((clazz = classes[j++])) { 
        // Remove *all* instances 
        while (cur.indexOf(" " + clazz + " ") >= 0) { 
         cur = cur.replace(" " + clazz + " ", " "); 
        } 
       } 
       elem.className = value ? jQuery.trim(cur) : ""; 
      } 
     } 
    } 

    return this; 
},

來源

2013-12-10 05:15:09 jfriend00

感謝您的全面選擇，現在'.attr（'class'，'a'）'似乎正是我所期待的。 – interpolack

如何使用toggleClass？如果只有3個班，你可以保留一些陣列狀態是這樣的：

var states = { 
    a: true, 
    b: false, 
    c: false 
} 

function toggle(el, state) { 
    var $el = $(el); 
    for(var class in state) 
     $el.toggleClass(class, state[class]); 
} 

toggle(someEl, states);

它可以作爲jQuery插件進行爲好。當然，這不是最快的方式，但我認爲很可讀。爲了提高效率，您可以使用本地el.className（當您只有3個班時，這可能是最好的方式）。

來源

2013-12-10 05:08:17 Tony

+1這絕對是一個可讀的解決方案，我根本不會想到將類放入數組並循環遍歷它們。然而，理想情況下，要求一個元素一次只有一個類，將會有直觀和直接的方式。看起來，@ jfriend00的'attr（'class'，'a'）'是我正在尋找的東西。 – interpolack

在多個國家之間切換的最佳策略？

回答

相關問題