JS不在PC上工作，但在JSFIddle上工作

该代码在JSFiddle中完美工作，但当我将其放在HTML文件中时，该代码无法正常工作。我自己找不到错误。JS不在PC上工作，但在JSFIddle上工作

这里是工作链路Fiddle demo

而且波纹管是一种不正常的代码：

<!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>

我怀疑我失去了一些东西来加载，但不能弄明白。

来源

2013-09-24 MKM

检查您的控制台以查看错误是什么。 –

可能代码在这些元素存在之前正在运行 –

这是“无法正常工作”。它怎么不起作用？什么不起作用？ – sushain97

您需要将您的jQuery代码包装在document ready调用中。

$(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'); 
     } 
    }); 
});

或之前关闭身体标记。在元素存在于页面之前，您正在执行代码。 jsFiddle.net自动将您的代码包装在文档就绪调用中。

来源

2013-09-24 17:10:21 j08691

非常感谢！有用！我是这样一个傻瓜:( – MKM

不客气，不要汗水，它是学习的一部分 – j08691

您的代码在加载<head>时执行，所以复选框还不存在。使用$(document).ready()在页面加载完成时执行代码，或将代码元素放在代码中使用的元素之后（在<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>

此外，在那里的jsfiddle在左侧栏中的选项在onLoad处理程序来执行代码。这是一个默认选项，它也解决了您的问题。这解释了它在JSFiddle中的工作。

来源

2013-09-24 17:10:58 Pietu1998

当文档准备就绪时，JSFiddle自行执行代码。您必须将其添加到本地文件中。

本替换你的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'); 
     } 
    }); 
});

来源

2013-09-24 17:13:23

竖起大拇指！谢谢 – MKM

裹文件准备函数内部的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'); 
    } 
}); 
});

还要确保您已具备互联网连接，因为jQuery库是在运行加载从服务器的时间。如果你没有互联网，那么你的代码将无法工作。

来源

2013-09-24 17:15:08

感谢哥们，它的工作原理我发现我的错误 – MKM

没有提到，它是学习的一部分... –

JS不在PC上工作，但在JSFIddle上工作

回答

相关问题