【发布时间】：2014-10-08 21:05:17
【问题描述】：
我会再写一点来澄清我的问题。请留下来陪我。
我有一个ImageMap 和一个ImageFlip 和一个MouseOver（都写在JS）。单击ImageMap 中突出显示的区域之一将打开一个LightBox（我使用Colorbox），其中包含一个多项选择测验，写在JS 和CSS 和一个回答按钮。点击回答按钮将打开一个PopUp，说明无论回答是错还是对。
到目前为止，还不错。
工作原理：
我有一个HTML document，我在其中加载了<head>、Colorbox JS file、Colorbox CSS file以及jQuery file。 ImageMap 在这个HTML Document 中（我们称之为Document1）。我在ImageMap 中突出显示的区域后面添加了一个链接，指向一个新的HTML Document (Document2)，其中包含测验并用Document1 中的Colorbox function 告诉我在ImageMap 上打开Document2 作为iFrame .除了问题（写在HTML）之外，测验的Document2 还包含写在文档中的JS 和CSS Style（不像Document1 那样与Colorbox JS and CSS files 外部链接）。
效果很好。
它如何不再工作了
但后来我认为拥有几个JS files 和几个CSS 文件而不是另一个Document2 会更好（所以第二个.html 站点包含整个测验，而不是全部在文档中实现）。因此，我将Document2、JS 和CSS 分开，并将测验中的问题写入Document1。这给我留下了一个JS file 用于测验，CSS file 用于测验，JS file 用于Colorbox 以及CSS file 用于颜色框。
所有JS files 和CSS files 都加载到Document1 的<head> 中。现在没有Document2了。
但是，现在测验不再起作用了。单击突出显示的区域有效，Lightbox 会打开问题，但回答按钮不再打开 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>
我唯一能想到的是，使用我的JS Quiz file 访问div container 可能会出现问题。
$(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¨。
这可能是问题吗？
【问题讨论】：
-
控制台有错误吗？
-
@JayBlanchard 不...当我点击
Answere Button时，它什么也没发生。 -
在此更改之前您使用的是什么版本的 jquery？很确定支持
@name=q1的最后一个版本是 1.2.6
标签： javascript jquery html css dom