遍历class

一般国外的网站很注重细节，他们会把菜单或者button做成图片，并且还有hover和selected状态。

 

如果仅仅是单独的button，可以addClass("xx")或者removeClass("xx"),xx是固定值，

但是对于一组菜单或者button，这个时候需要动态地给每个标签加一个对应状态的class，来控制显示样式。

例如下面这样：

<ul>
      <li class="logo1">logo1</li>
      <li class="logo2">logo2</li>
      <li class="logo3">logo3</li>
</ul>

selected的时候：

<ul>
      <li class="logo1 logo1-selected">logo1</li>
      <li class="logo2">logo2</li>
      <li class="logo3">logo3</li>
 </ul>

 hover的时候:

<ul>
      <li class="logo1 logo1-selected logo1-hover">logo1</li>
      <li class="logo2">logo2</li>
      <li class="logo3">logo3</li>
 </ul>

 

<script type="text/javascript">
    $(function(){
      $("ul li").each(function(){
		var currentClass = $(this).attr("class");
		$(this).hover(
		function(){
			removeHover();
			$(this).addClass(currentClass+"-hover");
		},
		function(){
			removeHover();
		}
	    )
        $(this).click(function(){
		  removeHoverSelected()
          $(this).addClass(currentClass+"-selected");
        })
      })
    })
	function removeHover(){
		 $("ul li").each(function(){
            var classNames = $(this).attr("class").split(" ");
            for(var i = 0;i<classNames.length;i++){
              if(classNames[i].indexOf("hover") > -1){
                $("ul li").removeClass(classNames[i]);
              } 
            }
          })  
	}

	function removeHoverSelected(){
		 $("ul li").each(function(){
            var classNames = $(this).attr("class").split(" ");
            for(var i = 0;i<classNames.length;i++){
              if(classNames[i].indexOf("selected") > -1 || classNames[i].indexOf("hover") > -1){
                $("ul li").removeClass(classNames[i]);
              } 
            }
          })  
	}
  </script>

这种方法对N个元素的菜单组或者button组都适用。