Commutation de classe entre deux éléments à l'aide de jQuery

Question

J'ai deux éléments avec un nom de classe chacun. Et sur un événement, j'aimerais qu'ils changent de cours.
Donc, fondamentalement, je voudrais faire quelque chose comme ceci:

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

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

Et cela se traduirait par #div1 ayant someOtherClass comme son nom de classe et #div2 ont someStylingClass ... Des suggestions?

Answer 1

Vous pouvez utiliser toggleClass():

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

En supposant que vous commencez avec l'exemple que vous avez publié, où chaque élément a une classe ou l'autre (mais pas les deux), alors cela fonctionnera comme prévu.

Si vous avez besoin d'échanger les classes sans savoir quelles classes vous échanger, vous pouvez faire:

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

Answer 2

jQuery UI switchClass?

Answer 3

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')); 

Answer 4

code pseudo

 


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 
}