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

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

代码应该是这样的，

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

Answer 2

您可以通过两种方式解决此问题。

1）使用AddClass＆amp; RemoveClass方法

    $("a.top-bar-trigger").click(changeClass);

    function changeClass() {
        if($("#icon").hasClass('icon_plus')){
            $("#icon").removeClass("icon_plus").addClass("icon_minus-06");
        }
        else{
            $("#icon").removeClass("icon_minus-06").addClass("icon_plus");
        }
    }

2）使用ToggleClass

    $("a.top-bar-trigger").click(changeClass);

    function changeClass() {
       $("#icon").toggleClass("icon_plus icon_minus-06");
    }

您可以在此处查看JSFiddle链接

1）https://jsfiddle.net/4vzsn4kt/

2）https://jsfiddle.net/zzq820eu/

Answer 3

您可以尝试这种方式：

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

小提琴：https://jsfiddle.net/5au3ywmz/2/

Answer 4

问题已解决

如果在DOM准备就绪后运行的代码，你可以看到它在这里工作：jsfiddle.net/hosw2wc9 - Adam Konieska

Css onclick更改课程

4 个答案:

DEMO