Javascript 在一个HTML文档中实现多个JS和CSS文件
我会再写一点来澄清我的问题。请和我呆在一起。 我有一个Javascript 在一个HTML文档中实现多个JS和CSS文件,javascript,jquery,html,css,dom,Javascript,Jquery,Html,Css,Dom,我会再写一点来澄清我的问题。请和我呆在一起。 我有一个ImageMap，带有ImageFlip和MouseOver（都是用JS编写的）。点击ImageMap中突出显示的一个区域将打开一个LightBox（我使用了Colorbox）和一个选择题测验，用JS和CSS编写，还有一个Ansare按钮。单击Answare按钮将打开一个弹出窗口，说明Answare是对是错。 到目前为止，很好 工作原理： 我有一个HTML文档，我在中加载了colorboxjs文件和colorboxcss文件以及jQuery文
ImageMapImageFlipMouseOverJSImageMapLightBoxColorboxJSCSS弹出窗口HTML文档colorboxjs文件colorboxcss文件jQuery文件ImageMapHTML文档中（我们称之为Document1
）。我在ImageMap
中突出显示的区域后面添加了一个链接，链接到一个新的HTML文档（Document2）
，其中包含测验，并通过Document1
中的Colorbox函数来打开Document2
作为ImageMap
上的iFrame
。测验的Document2
除了包含问题（用HTML
编写）之外，还包含JS
和CSS样式
，它们都是在文档中编写的（不像Document1
中那样与Colorbox JS和CSS文件
进行外部链接）。
效果很好
它是如何不再工作的
但后来我想最好有几个JS文件
和几个CSS
文件，而不是另一个Document2
（所以是第二个.html网站，里面有整个测试，而不是全部用Document实现）。所以我把Document2
中的JS
和CSS
分开，把测验中的问题写进Document1
。这给我留下了一个JS文件
用于测验，一个CSS文件
用于测验，一个JS文件
用于Colorbox
以及一个CSS文件
用于Colorbox。
所有JS文件
和CSS文件
都加载到Document1的
中。现在不再有Document2
。
但是，现在这个测验已经不起作用了。点击突出显示的区域，会打开带有问题的灯箱
，但Answare按钮不会再打开一个弹出窗口
，该弹出窗口将显示所选Answare是正确的还是错误的
我所做的就是去掉额外的文档2
，以免在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>
正如你所看到的，我选择了@name=q1
，这是从-
在jQuery1.3中，删除了[@attr]样式选择器（它们以前在jQuery1.2中被弃用）。只需从选择器中删除“@”符号即可使其再次工作
由于您使用的是jQuery 1.10.n，因此需要从此处的代码中删除@
：
if (!$("input[@name=q1]:checked").val()
你让我失去了一半，但是你写的jQuery函数可以修复：
尝试改变
!$("input[@name=q1]:checked").val()
到
控制台有错误吗？@JayBlanchard没有。。。当我点击Answare按钮时，它什么也没有发生。在这个更改之前，您使用的是什么版本的jquery？非常确定支持@name=q1
的最新版本是1.2.6完美版。谢谢。这就成功了。我在另一个版本中加载了本地版本的jQuery
。我不知道这已经改变了。嘿，删除@
有效，但我不会添加任何长度或其他内容，因为我的JS
脚本以前工作得很好！我个人会选择检查长度而不是值，但这是你的决定。
!$("input[@name=q1]:checked").val()
$("input[name=q1]:checked").length!=0