jquery - 不懂jquery连接？

Question

我试图在我的网站上运行一些 jquery 代码，但代码未按预期工作。我尝试了几组不同的代码，认为我的代码是问题所在。尽管当我在 jquery 中测试了一个简单的类更改时，代码仍然无法工作。所以我想知道这是否是我与 jquery 文件的连接。看看我的设置。

在头标签中，我有以下内容。

<script src="Script/jquery-1.11.3.js"></script>
<script src="Script/jquery-1.11.3.min.js"></script>
<script src="Script/HomePageDDL.js"></script>

这是通过正文标签

<div id="MainContent">
    <h1 id="toggle" class="h1Example">Jquery Test</h1>
</div>

这是我的 jquery 代码

$('#toggle').click(function () {
    $(this).toggleClass('newH1Example');
});

这是我的 CSS

.h1Example {
color: green;
}

.newH1Example {
color: green;
text-shadow: 2px 2px 5px black;
}

Answer 1

您在 html 中包含两次 jquery。删除其中任何一个。如果您需要在生产中运行，请使用缩小版本，因为它很小(删除了空格等)。如果你想在开发模式下运行，当你需要调试时，请使用非缩小版。

<script src="Script/jquery-1.11.3.js"></script>
<script src="Script/jquery-1.11.3.min.js"></script>

你也需要更新你的JS。

为您的 JS 添加 jquery。这是必需的，因为您需要确保文档准备好后完成所有装订。如果您不使用文档就绪，那么该元素不一定在 DOM 中可用，因此，事件不会被绑定(bind)。

$(document).ready(function(){
    $('#toggle').click(function () {
        $(this).toggleClass('newH1Example');
    });

});

希望对你有帮助!!!