代码在JSFiddle和Codepen中工作，但不在浏览器中，我在哪里出错了？ [英] Code works in JSFiddle and Codepen but not in browser, where am I gone wrong?
问题描述
运行下面的代码有什么问题？
What's the problem with the below code running?
它运行在JSFiddle和Codepen中，所以我不明白为什么它不能在浏览器中正常工作一个网页。
It runs in JSFiddle and Codepen so I don't understand why it won't work just in the browser as a web page.
我看到jQuery与SVG不兼容的一些事情，但是为什么它在JSFiddle和CodePen中工作，如果是这样的话。难道他们不像很普通的网页那样运行代码？
I see somethings about incompatibility between jQuery and SVG however why does it work in JSFiddle and CodePen if that's the case. Don't they run code pretty much as if it were a normal webpage?
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<svg width="500" height="300">
<circle name="black" id="blackC" cx="50" cy="50" r="40" stroke="#0C090A" value="7" stroke-width="4" fill="#0C090A"/>
<circle name="blue" id="blueC" cx="150" cy="50" r="40" stroke="#3498DB" stroke-width="4" fill="#3498DB"/>
<circle name="green" id="greenC" cx="250" cy="50" r="40" stroke="#0C090A1" stroke-width="4" fill="#2ECC71"/>
<circle name="grey" id="greyC" cx="350" cy="50" r="40" stroke="#95A5A6" stroke-width="4" fill="#95A5A6"/>
<circle name="purple" id="purpleC" cx="50" cy="150" r="40" stroke="#9B59B6" stroke-width="4" fill="#9B59B6"/>
<circle name="orange" id="orangeC" cx="150" cy="150" r="40" stroke="#E67E22" stroke-width="4" fill="#E67E22"/>
<circle name="red" id="redC" cx="250" cy="150" r="40" stroke="#C0392B" stroke-width="4" fill="#C0392B"/>
<circle name="yellow" id="yellowC" cx="350" cy="150" r="40" stroke="#F1C40F" stroke-width="4" fill="#F1C40F"/>
</svg>
<form id="colorgenics" method="POST" action="testCg.php" name="cgForm">
<input type="text" id="selection" name="selection" />
<input type="text" name="name" placeholder="Enter your name" />
<input name="submit" value="Submit" type="submit" />
</form>
<br />
<button id="arrayCheck" name="arrayCh">Check Value</button>
<script language="text/javascript">
$
var numArray = [];
$("#blackC").on("click", function () {
if ($.inArray("7", numArray) == -1) {
numArray.push("7");
}
});
$("#blueC").on("click", function () {
if ($.inArray("1", numArray) == -1) {
numArray.push("1");
}
});
$("#greenC").on("click", function () {
if ($.inArray("2", numArray) == -1) {
numArray.push("2");
}
});
$("#greyC").on("click", function () {
if ($.inArray("0", numArray) == -1) {
numArray.push("0");
}
});
$("#purpleC").on("click", function () {
if ($.inArray("5", numArray) == -1) {
numArray.push("5");
}
});
$("#orangeC").on("click", function () {
if ($.inArray("6", numArray) == -1) {
numArray.push("6");
}
});
$("#redC").on("click", function () {
if ($.inArray("3", numArray) == -1) {
numArray.push("3");
}
});
$("#yellowC").on("click", function () {
if ($.inArray("4", numArray) == -1) {
numArray.push("4");
}
});
$("#arrayCheck").on("click", function () {
alert(numArray);
$("#selection").val(numArray);
});
</script>
</body>
</html>
推荐答案
打开浏览器时无法使用它在本地，因为它试图找到jQuery的路径为：
It won't work in your browser when you open it locally because it's trying to find the path to jQuery as:
<script src="file://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
因此，将包含更改为：
So change the include to:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
路径：
The path:
//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js
是从服务器的相对路径，它会自动补偿 http vs https ，但是在本地运行时，浏览器会在开始时放置一个文件：，这将失败。
is meant to be a relative path from a server, which automatically compensates for http vs https, however when run locally, the browser puts a file: in the beginning which will fail.
这篇关于代码在JSFiddle和Codepen中工作，但不在浏览器中，我在哪里出错了？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
