使用jQuery在兩個元素之間切換類

我有兩個每個都有一個類名的元素。在某些事件上，我希望他們改變班級。
所以基本上我想要做這樣的事情：使用jQuery在兩個元素之間切換類

$("#div1").switchClassWith("#div2"); 

<div id="div1" class="someStylingClass">...content...</div> 
<div id="div2" class="someOtherClass">...content...</div>

，這將導致其someOtherClass作爲它的類名#div1，並#div2有someStylingClass ......有什麼建議？

來源

2010-08-25 peirix

你知道什麼是這些類的提前，或者他們可能是什麼嗎？ – 2010-08-25 19:02:41

建議：這個例子看起來更像是一個swapClasses（div1，div2）而不是div1.switchClassWith（div2） – Rahul 2010-08-25 19:04:13

@Nick：是的，我知道類名是什麼，所以我只是尋找一些比創建一個更簡單的東西函數，這將不得不創建臨時變量等... – peirix 2010-08-25 20:09:42

你可以使用toggleClass()：

$('#div1,#div2').toggleClass('someStylingClass someOtherClass');

假設你開始您發佈的例子，其中每個元素都有一個類或其他（但不能同時），則預期這會工作。

如果您需要交換的類不知道你是什麼交換類，你可以這樣做：

var $div1 = $('#div1'), $div2 = $('#div2'), tmpClass = $div1.attr('class'); 
$div1.attr('class', $div2.attr('class')); 
$div2.attr('class', tmpClass);

來源

2010-08-25 19:00:35 meagar

'.toggleClass（'someStylingClass someOtherClass'）':) – 2010-08-25 19:01:32

@Nick，不錯的一個:) – 2010-08-25 19:03:33

@Nick謝謝，修改回答 – meagar 2010-08-25 19:04:41

jQuery UI switchClass？

來源

2010-08-25 19:00:43

function SwitchClass(a,b){ 
    var aClass = a.attr('class'); 
    var bClass = b.attr('class'); 
    a.removeClass(aClass).addClass(bClass); 
    b.removeClass(bClass).addClass(aClass); 
} 


SwitchClass($('div1'),$('div2'));

來源

2010-08-25 19:04:54 IgalSt

僞代碼

 


function swapClasses(element1, element2) 
{ 
    class1List1 = getClassList(element1) 
    classList2 = getClassList(element2) 

    for class in classList1 
    { 
     element2.addClass(class) 
    } 

    //similarly for element1 
} 

function getClassList(element) 
{ 
    //refer to http://stackoverflow.com/questions/1227286/get-class-list-for-element-with-jquery 
}

來源

2010-08-25 19:08:24 Rahul

使用jQuery在兩個元素之間切換類

回答

相關問題