下面运行的代码有什么问题？
它在JSFiddle和Codepen中运行，所以我不明白为什么它不能作为一个web页面在浏览器中工作。
我看到一些关于jQuery和SVG之间不兼容的东西，但是如果是这样的话，为什么它在JSFiddle和CodePen中工作。他们运行的代码不是很像一个普通的网页吗？
JSFiddle
CodePen
<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的路径查找为：
<script src="file://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
因此，将include更改为：
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
路径：
//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js
是指来自服务器的相对路径，它会自动补偿
httpvshttps，但是当在本地运行时，浏览器会将file:放在开头，这将失败。关于jquery - 代码可以在JSFiddle和Codepen中工作，但不能在浏览器中工作，我哪里出错了？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/23959004/