Question

以下代码运行有什么问题？

它在JSFiddle和Codepen中运行，所以我不明白它为什么不能在浏览器中作为网页工作。

我看到有关jQuery和SVG之间不兼容的事情但是为什么它在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>

Answer 1

在本地打开它时，它无法在浏览器中运行，因为它试图找到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

是来自服务器的相对路径，它自动补偿http vs https，但是当在本地运行时，浏览器会在开头放置file:，这将失败

代码在JSFiddle和Codepen中工作，但在浏览器中没有，我哪里出错了？

1 个答案: