JS无法在PC上运行，但可以在JSFIddle上运行
[英]JS not working in pc but works on JSFIddle
问题描述
The code works perfectly in JSFiddle but its not working when I put it on a html file. 
该代码在JSFiddle中可以完美地工作，但是当我将其放在html文件中时却无法工作。 I can't find the error by myself. 我自己找不到错误。
Here is the working link Fiddle demo 这是工作链接小提琴演示
And bellow is the code which is not working: 下面是无法正常工作的代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
$('#Checkbox1, #Checkbox2').on('change', function () {
console.log();
if ($('#Checkbox1').is(':checked') && $('#Checkbox2').is(':checked')) {
$('#circle_2').css('background-color', '#999');
} else {
$('#circle_2').css('background-color', 'transparent');
}
});
</script>
<style type="text/css">
#circle_2 {
border:solid 1px #333;
width: 100px;
height: 100px;
border-radius: 50%;
display:inline-block;
}
#circle {
border:solid 1px #333;
width: 100px;
height: 100px;
border-radius: 50%;
display:inline-block;
}
.circle_text{
text-align:center;
font-family:Arial, Helvetica, sans-serif;
font-size:37px;
color:#333;
font-weight:bold;
}
</style>
</head>
<body>
<!-- Circle 1-->
<div id="position_1">
<div id="circle">
<p class="circle_text">
#1
</p>
</div>
</div>
<!-- Circle 2-->
<div id="position_2">
<div id="circle_2">
<p class="circle_text">
#2
</p>
</div>
</div>
<br/><br/>
<input type="checkbox" value="1" id="Checkbox1" name="Checkbox1"/> Answer one <br/>
<input type="checkbox" value="1" id="Checkbox2" name="Checkbox2"/> Answer two <br/>
<input type="checkbox" value="1" id="Checkbox3" name="a3"/> Answer three <br/>
<input type="checkbox" value="1" id="Checkbox4" name="a4"/> Answer four <br/>
<input type="checkbox" value="1" id="Checkbox5" name="a5"/> Answer five <br/>
<input type="checkbox" value="1" id="Checkbox6" name="a6"/> Answer six <br/>
<input type="checkbox" value="1" id="Checkbox7" name="a7"/> Answer seven <br/>
<input type="checkbox" value="1" id="Checkbox8" name="a8"/> Answer eight<br/>
<input type="checkbox" value="1" id="Checkbox9" name="a9"/> Answer nine <br/>
<input type="checkbox" value="1" id="Checkbox10" name="a10"/> Answer ten <br/>
</body>
</html>
I suspect I am missing something to load, but can't figure it out. 我怀疑我缺少要加载的内容，但无法弄清楚。
4 个解决方案
解决方案1
5 已采纳 2013-09-24 17:10:21
You need to wrap your jQuery code in a document ready call. 您需要将jQuery代码包装在文档就绪调用中。
$(document).ready(function () {
$('#Checkbox1, #Checkbox2').on('change', function () {
console.log();
if ($('#Checkbox1').is(':checked') && $('#Checkbox2').is(':checked')) {
$('#circle_2').css('background-color', '#999');
} else {
$('#circle_2').css('background-color', 'transparent');
}
});
});
Or before the closing body tag. 或在结束标签前。 You're executing the code before the elements exist in the page. 您需要在页面中的元素存在之前执行代码。 jsFiddle.net wraps your code in the document ready call automatically. jsFiddle.net自动将代码包装到文档ready调用中。
解决方案2
1 2013-09-24 17:10:58
Your code executes when <head> is loaded, so the checkboxes don't exist yet. 您的代码在加载<head>时执行，因此这些复选框尚不存在。 Use $(document).ready() to execute the code when the page has finished loading, or put the code element after the elements used in the code (inside <body> ). 页面加载完成后，请使用$(document).ready()执行代码，或者将code元素放在代码中使用的元素之后（在<body> ）。
<script type="text/javascript">
$(document).ready(function(){
$('#Checkbox1, #Checkbox2').on('change', function () {
console.log();
if ($('#Checkbox1').is(':checked') && $('#Checkbox2').is(':checked')) {
$('#circle_2').css('background-color', '#999');
} else {
$('#circle_2').css('background-color', 'transparent');
}
});
});
</script>
Also, in JSFiddle there is an option in the left bar to execute the code in an onLoad handler. 另外，在JSFiddle中，左栏中有一个选项可以在onLoad处理程序中执行代码。 That is a default option, and it fixes your problem also. 这是默认选项，它也可以解决您的问题。 This explains it working in JSFiddle. 这解释了它在JSFiddle中的工作。
解决方案3
1 2013-09-24 17:13:23
JSFiddle executes the code when document is ready, by itself. 当文档准备就绪时，JSFiddle自行执行代码。 You've to add it on your local file. 您必须将其添加到本地文件中。
Replace your Javascript with this: 用以下代码替换您的Javascript：
$(document).ready(function() {
$('#Checkbox1, #Checkbox2').on('change', function () {
console.log();
if ($('#Checkbox1').is(':checked') && $('#Checkbox2').is(':checked')) {
$('#circle_2').css('background-color', '#999');
} else {
$('#circle_2').css('background-color', 'transparent');
}
});
});
解决方案4
0 2013-09-24 17:15:08
Wrap the jQuery code inside document ready function: 将jQuery代码包装在文档准备功能内：
$( document ).ready(function() {
$('#Checkbox1, #Checkbox2').on('change', function () {
console.log();
if ($('#Checkbox1').is(':checked') && $('#Checkbox2').is(':checked')) {
$('#circle_2').css('background-color', '#999');
} else {
$('#circle_2').css('background-color', 'transparent');
}
});
});
Also make sure that you have working internet connection because the jQuery library is loaded at run time from server. 还要确保您具有正常的Internet连接，因为jQuery库是在运行时从服务器加载的。 If you don't have internet then your code will not work. 如果您没有互联网，则您的代码将无法使用。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.