Question

我会写一点来澄清我的问题。请留下来陪我。我有一个ImageMap，ImageFlip和MouseOver（所有都写在JS）。点击ImageMap中其中一个突出显示的区域，会打开一个LightBox（我使用Colorbox），其中包含多项选择测验，用JS和{{1}编写和一个回答按钮。单击answerwere按钮将打开CSS，说回答错误或正确。到目前为止，这很好。

工作原理： 我有一个PopUp我加载到HTML document <head>和Colorbox JS file以及Colorbox CSS file。 jQuery file中有ImageMap（我们称之为HTML Document）。我在Document1的突出显示区域后面添加了一个链接到包含测验的新ImageMap，并通过HTML Document (Document2)中的Colorbox function告诉我Document1作为Document2上的iFrame。测验的ImageMap除了问题（用Document2编写）HTML和JS之外，还包含在文档中（不是像{{{{}}中那样的外部链接1}}与CSS Style）。这很好用。

它不再起作用 但后来我觉得有几个Document1以及几个Colorbox JS and CSS files文件更好，而不是另一个JS files（所以第二个.html网站包含整个测验，而不是全部在文件中实施）。因此，我在CSS Document2和Document2中分隔，并将测验中的问题写入JS。这为测验留下了CSS，测验为Document1，JS file为CSS file，彩色框为JS file。所有Colorbox和CSS file都加载在JS files的{{1}}中。现在不再有CSS files了。但是，现在测验不再有效了。单击突出显示的区域，<head>会打开问题，但是回答按钮不再打开Document1，这应该显示所选回答是对还是错的天气。

我所做的只是摆脱额外的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>

正如您所见，我转到的是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"; ....。

这可能是问题吗？

Answer 1

来自docs -

在jQuery 1.3 [@attr]中删除了样式选择器（它们之前在jQuery 1.2中已被弃用）。只需从选择器中删除“@”符号，以便再次使用它们。

由于你使用的是jQuery 1.10。 n ，你需要从代码中删除@：

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

Answer 2

你在那里失去了一半，但你写的jQuery函数可以修复：

尝试改变

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

到

$("input[name=q1]:checked").length!=0

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

2 个答案: