JQuery插件:用以操作匹配元素的类

 此方法接收两个类名,她能够每次调用时更换应用每个元素的类.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<SCRIPT language=javascript src="jquery-1.6.js" type=text/javascript ></SCRIPT>
<style  type="text/css" >
.this{ color:red; }
.that{ color:green; }
</style>
</head>
<body>
<script type="text/javascript" >
(function ($) { 
    jQuery.fn.swapClass=function(class1,class2){
        return this.each(function(){
            var $e=jQuery(this);
            if($e.hasClass(class1)){
                $e.removeClass(class1).addClass(class2);
            }else if($e.hasClass(class2)){
                $e.removeClass(class2).addClass(class1);
            }
        });
    }
})(jQuery);

    $(function(){
        $("#swap").click(function(){
            $('li').swapClass('this','that');
        });
    });
</script>
<ul>
<li >235235235</li>
<li class="this" >235235235</li>
<li class="this" >235235235</li>
<li class="this" >235235235</li>
<li >235235235</li>
<li  class="this">235235235</li>
<li >235235235</li>
<li  class="this">235235235</li>
<li >235235235</li>
<li >235235235</li>
</ul>
<input type="button" value="Swap classes" id="swap" />
</body>
</html>

你可能感兴趣的:(JQuery插件:用以操作匹配元素的类)