javascript - 单击更改类不起作用？

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 代码包装在“文档就绪” block 中，以确保在调用您的函数之前已加载 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并在下面演示: