Я напишу немного больше, чтобы прояснить мою проблему. Пожалуйста, оставайтесь со мной. У меня есть ImageMap с ImageFlip и MouseOver (все написано на JS). Нажав на одну из выделенных областей в ImageMap, вы откроете LightBox (я использовал Colorbox) с несколькими вариантами Quiz, написанными в 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 в Document1, чтобы открыть Document2 как iFrame на моем ImageMap. Document2 из Quiz содержался помимо Вопросов (написанных в HTML) JS и CSS Style, который был записан в Документе (не связан с ним как в Document1 с Colorbox JS and CSS files). Это сработало отлично.
Как его больше не работает Но потом я подумал, что было бы лучше иметь несколько JS files, а также несколько CSS файлов, а не другой Document2 (так второй сайт .html со всей Викторины в нем, скорее всего реализованный в Документе). Поэтому я разделил Document2JS и CSS и написал вопросы из опроса в Document1. Это оставило меня с JS file для Викторины, CSS file для Викторины, JS file для Colorbox, а также CSS file для colorbox. Все JS files и CSS files загружены в <head> от Document1. Сейчас нет 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¨.
Может быть, проблема?
Любые ошибки в консоли? –
@JayBlanchard Nope ... Его просто ничего не происходит, когда я нажимаю кнопку «Answere Button». – Maccaroni
Какую версию jquery вы использовали до этого изменения? довольно уверен, что последняя версия для поддержки '@ name = q1' была 1.2.6 –