Question

我有一个元素，当点击时，会检查不同元素的类。

如果它有特定的类，它会删除它，并用不同的类替换它。同样，如果点击，它将使用交换的类名反转该过程。

（为了给出一个视觉，该课程是一个可爱的星形图标，它的阴影版本）

我认为下面的代码有点过于冗长任何人都可以看到更好/更短的方式来陈述它吗？

<script language="javascript" type="text/javascript">
$(document).ready(function(){


   $(".clickme").click(function(){ 

     if($("#staricon").hasClass("starON")){

         $("#staricon").removeClass("starON").addClass("starSHADED"); 

     }else if($("#staricon").hasClass("starSHADED")){

         $("#staricon").removeClass("starSHADED").addClass("starON");   
     }


  });

});
</script>

此外，starON和starSHADED是精灵的一部分上面的代码有效！但我确信它可以优化。

我看到jQuery有一个.toggleClass() API，而且我正在错误地交换这两个类。

Answer 1

首先，将您选择的元素设置为变量（如果您将对jQuery进行多次操作，那么jQuery总是一个好的经验法则。）

其次，是否有一个特殊原因需要两个州的课程？默认情况下我会给它一个带阴影的星形图像，并在它有starON类时覆盖它。然后，一个toggleClass可以完成所有工作。

$('#staricon').toggleClass("starON");

Answer 2

$('#staricon').toggleClass('starSHADED').toggleClass('starON');

JQuery - 优化类切换器？

2 个答案: