javascript - HTML/CSS/JS 初学者错误

Question

这些在一个JSFiddle中工作，andi在我原来的问题的答案上发布了。我很困惑我错过了什么，它在浏览器中不起作用。我知道这将是一个非常简单的修复。提前致谢。

HTML：

<div class="blackwrap">
    <header class="blackbar">
        <h2>Before he knew it, he couldn't see a thing.</h2>
        <h4>He fumbled around for the <a id="flash">flashlight</a> on his phone.</h4>
    </header>
</div> <!-- .blackwrap-->    

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="script.js"></script>
</body>

CSS：

.blackbar {
    background: black;
    color: white;
}
.blackbar.lit {
    background:yellow;
    color:black;
}

Javascript：

$("#flash").on("mouseover", function(){
    $(".blackbar").addClass("lit");
}).on("mouseout", function(){
    $(".blackbar").removeClass("lit")
});

Answer 1

您的 jquery 未正确加载 在 src 中使用http:如下：

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

Answer 2

问题可能是，您正在使用该file://协议在本地计算机上运行 Jquery 包含代码。

所以在你的本地机器上使用

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

在服务器上改成这个

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

在服务器端是http:或https:，所以服务器会自动选择对应的。

Answer 3

它在指向 jquery 的 cdn 链接中非常简单的修复，您应该进行 http 调用

而不是这个

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

改成这个

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

问题是，如果您不保留 http，浏览器会认为它是您电脑中的本地文件。