将多个JS和CSS文件实现到一个HTML文档中

Implement several JS and CSS files to one HTML Document

本文关键字：一个 文档 HTML 实现 JS CSS 文件      更新时间：2023-09-26

我会写更多的东西来澄清我的问题。请留在我身边。我有一个ImageMap，有一个ImageFlip和一个MouseOver(都是用JS写的(。单击ImageMap中突出显示的区域之一将打开一个LightBox(我使用了Colorbox(，其中包含用JS和CSS编写的多项选择测验以及一个ansare按钮。点击安斯瓦按钮会打开一个PopUp，说安斯瓦是错的还是对的。目前为止，一切都好。

工作原理：我有一个HTML document，我在<head>装载了Colorbox JS file和Colorbox CSS file以及jQuery file.ImageMap就在这个HTML Document(我们称之为Document1(。我在ImageMap中突出显示的区域后面放置了一个指向包含测验的新HTML Document (Document2)的链接，并通过Document1中的Colorbox function告诉打开Document2作为我ImageMap上的iFrame。测验的Document2除了问题(用HTML写(外，还包含JS和CSS Style，这是写在文档中的(不像Document1与Colorbox JS and CSS files那样相互链接(。这很好用。

它如何不再工作但后来我认为拥有多个JS files以及几个CSS文件而不是另一个Document2会更好(所以第二个.html站点包含整个测验，而不是全部在文档中实现(。所以我在Document2 JS和CSS中分开，把测验中的问题写成Document1。这给我留下了一个测验JS file，一个测验CSS file，一个Colorbox JS file以及一个颜色框的CSS file。所有JS files和CSS files都加载在Document1的<head>中。现在没有Document2了。但是，现在测验不再起作用了。单击突出显示的区域有效，Lightbox打开并显示问题，但 ansare 按钮不再打开PopUp，这应该显示所选 ansare 是对还是错的天气。

我所做的只是摆脱额外的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="answerswers">            
    <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¨.

这可能是问题所在吗？

来自文档 -

在jQuery 1.3中，[@attr]样式选择器被删除(它们以前在jQuery 1.2中被弃用(。只需从选择器中删除"@"符号，即可使它们再次工作。

因为你使用的是jQuery 1.10。n 您需要从此处的代码中删除@：

if (!$("input[@name=q1]:checked").val()

你有点把我弄丢了一半，但是你写的jQuery函数可以修复：

尝试改变 

!$("input[@name=q1]:checked").val()

自

$("input[name=q1]:checked").length!=0
相关文章：