点击更改课程不工作？

Question

尝试使用jQuery更改项目的类，但我似乎无法使其工作。出于某种原因，一切都没有发生。

代码：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
    $("#theSpinner").click(function() {
        $("#theSpinner").toggleClass("spinning");
    });
</script>

<a href="#" id="reload">
    <img src="spinbut.png" style="width:100px;height:100px;" id="theSpinner" class="notspinning">
</a>

我试过了：

$("#theSpinner").click(function() {
    $("#theSpinner").removeClass("notspinning");
    $("#theSpinner").addClass("spinning");
});

以及$("#reload")代替$("#theSpinner")，以及onClick=""到包含addClass / removeClass部分的javascript函数。

我真的不知道这是什么问题，但任何绕过这头公牛的方式都会让我很开心。

Answer 1

尝试将jQuery代码包装在“文档就绪”块中，以确保在调用函数之前加载了jQuery：

<script>
    // Example of a document ready function
    $(function(){
        // When jQuery has loaded, wire up this function
        $("#theSpinner").click(function() {
            $(this).toggleClass("spinning");
        });
    });
</script>

示例

你可以see a working example of this in action here并在下面演示：

Answer 2

你去吧

<a href="#" id="reload"> <img src="spinbut.png" style="width:100px;height:100px;" id="theSpinner" class="notspinning"> </a> 
<script type="text/javascript">
  $("#theSpinner").click(function() {
    $(this).toggleClass("notspinning spinning");
  });
</script>