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上工作

回答

相關問題