javascript - Css onclick 改变类

Question

我想在单击时更改类。

该类是icon icon_plus，当我点击时我希望该类是icon icon_minus-06，如果再次点击回到原来的

我的 HTML 代码

<a href="#" id="top-bar-trigger" class="top-bar-trigger"><i id="icon"    class="icon icon_plus"></i></a>

我的 javascript 代码:

<script>
$("a.top-bar-trigger").click(ontop);
   function ontop() {

   $("#icon").toggleClass("icon icon_minus-06");
 }
</script>

我的 javascript 很弱

感谢您的帮助。

Answer 1

尝试这样写toggleClass，

$("#icon").toggleClass("icon_plus icon_minus-06");

因为您将 icon 类保持为静态类。

DEMO

另请注意，尝试将您的代码包装在文档的就绪处理程序中。由于选择器会失败，如果您将脚本保留在 header 标记内。但是，如果您将脚本放在 body 标记的末尾，则没有问题。无论如何，最好使用文档的就绪处理程序，因为它会使代码更具程序性。

代码应该是这样的，

(function(){
  function ontop() {
    $("#icon").toggleClass("icon_plus icon_minus-06");
  } 
  $(function(){
    $("a.top-bar-trigger").click(ontop);
  });
})();