我會寫一點點來澄清我的問題。請留下來陪我。 我有ImageMapImageFlip和MouseOver（都寫在JS）。點擊ImageMap中突出顯示的區域之一將打開一個LightBox（我使用了Colorbox），其中包含JS和CSS以及一個answere按鈕。點擊答案按鈕將打開一個PopUp，表示答案錯誤或正確。 到目前爲止，很好。將多個JS和CSS文件實現爲一個HTML文檔
如何，它的工作： 我有一個HTML document，我在<head>的Colorbox JS file和Colorbox CSS file還有jQuery file加載。 ImageMap在這HTML Document（讓我們叫它Document1）。我將ImageMap中突出顯示的區域後面的鏈接放入新的HTML Document (Document2)，其中包含測驗，並通過中的Colorbox function告知Document2作爲我的ImageMap上的iFrame。測驗的Document2包含除問題（寫在HTML）JS和CSS Style，它寫在文檔中（不像Document1與Colorbox JS and CSS files一樣外部鏈接）。 這工作得很好。
如何其不工作了 但我認爲這將是更好的有幾個JS files以及一些CSS文件，而不是另一個Document2（所以第二的.html與整個測驗在它的網站，而所有在Document中實現）。所以我分開Document2JS和CSS，並把測驗的問題寫入Document1。這給我留下了測驗的JS file，測驗的CSS file，Colorbox的JS file以及用於彩盒的CSS file。 所有JS files和CSS files都加載在Document1的<head>中。現在沒有Document2了。 但是，現在測驗不再工作了。點擊突出顯示的區域可以工作，Lightbox隨問題打開，但answere按鈕不會再打開PopUp，它應該顯示所選答案是正確的還是錯誤的。
我所做的只是擺脫額外Document2爲了不在ImageMap與href鏈接到一個不同的網站（雖然工作雖然）。 這裏我的代碼Document1。如果您需要任何JS或CSS文件的代碼，請讓我知道。
<html>
<head>
<!-- LINK THE STYLESHEET, JQUERY AND THE JS SCRIPT OF COLORBOX AND QUIZ -->
<!-- STYLESHEET OF COLORBOX-->
<link rel="stylesheet" href="colorbox.css">
<!-- STYLESHEET OF QUIZ-->
<link rel="stylesheet" href="trivia_css.css">
<!-- LINK ZU JQUERY ONLINE-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!-- COLORBOX JS-->
<script src="jquery.colorbox.js"></script>
<!-- QUIZ JS-->
<script src="trivia_solo.jsx" type="text/javascript"></script>
<script>
//PRELOAD THE IMAGES
originale = new Image(698, 233);
originale.src = "paramo_plantas_original.gif";
....
//JS FUNCTION TO HIGHLIGHT THE PICTURES. IMAGEFLIP IS USED HERE
function resaltarHelecho() {
document.getElementById('juego_paramo').src = helecho.src;
return true;
}
....
//COLORBOX
$(function(){
$("#paramo area").colorbox({width:"35%", innerHeight:"35%", inline:true});
});
</script>
</head>
<body>
<!-- INSERT THE PICTURE -->
<img name="juego_paramo" id="juego_paramo" src="paramo_plantas_original.gif" usemap="#paramo">
<!-- CREATE THE MAP -->
<map name="paramo" id="paramo">
<area shape="poly" coords="0,161,4,161,4,162,12,162,12,163,19,163,26,165,34,166,45,168,52,170,62,174,73,177,82,180,91,184,103,188,112,192,122,196,133,202,142,207,152,212,162,216,172,221,180,224,186,227,193,230,197,233,0,233,0,161" href="#test" alt="helecho" onMouseOver="resaltarHelecho()" onMouseOut="originalJuego()">
</map>
<!-- THE HIDDEN DIV TAG NEEDS TO BE UNDER THE MAP -->
<div style="display:none">
<div id="test">
<!-- HTML PART OF QUIZ-->
<p class="question">1. What is the answer to this question?</p>
<ul class="answers">
<input type="radio" name="q1" value="a" id="q1a"><label for="q1a">Answer 1</label><br/>
<input type="radio" name="q1" value="b" id="q1b"><label for="q1b">Answer 2</label><br/>
<input type="radio" name="q1" value="c" id="q1c"><label for="q1c">Answer 3</label><br/>
<input type="radio" name="q1" value="d" id="q1d"><label for="q1d">Answer 4</label><br/>
</ul>
<br/>
<div id="results">
Show me the answers!
</div>
</div>
</body>
</html>
我能想到的唯一的事情是，它可能我有問題獲得訪問div container我JS Quiz file。
$(document).ready(function()
{ $("#results").click(function() {
if (!$("input[@name=q1]:checked").val()
) {
alert("You're not done yet!");
}
else {
var cat1name = "1";
var cat2name = "None";
....
正如你可以看到我去@name=q1這是<input type="radio" name="q1" value="a" (...)但在div container ¨test¨。
這可能是問題嗎？
控制檯中的任何錯誤？ – 2014-10-08 21:16:57
@JayBlanchard沒有......當我點擊'Answere Button'時，它什麼也沒有發生。 – Maccaroni 2014-10-08 21:18:35
在此更改之前，您正在使用哪個版本的jquery？很確定最後支持'@ name = q1'的版本是1.2.6 – 2014-10-08 21:19:51