代码之家  ›  专栏  ›  技术社区  ›  peirix

使用jQuery在两个元素之间切换类

  •  2
  • peirix  · 技术社区  · 14 年前

    我有两个元素,每个元素都有一个类名。我想让他们换个班。
    所以基本上我想这样做:

    $("#div1").switchClassWith("#div2");
    
    <div id="div1" class="someStylingClass">...content...</div>
    <div id="div2" class="someOtherClass">...content...</div>
    

    这会导致 #div1 someOtherClass #div2 someStylingClass ... 有什么建议吗?

    4 回复  |  直到 14 年前
        1
  •  11
  •   user229044    14 年前

    你可以用 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);
    
        2
  •  1
  •   IgalSt    14 年前
    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'));
    
        3
  •  1
  •   Rahul    14 年前

    
    
    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
    }
    
    
    
        4
  •  0
  •   user180100 user180100    14 年前