クリックしたときにどの章にいるかに応じて、画像/文字が異なる情報を表示できるようにするJavaScriptを探しています。たとえば、第 1 章では、キャラクター A に情報 A を表示させたいのですが、第 2 章では、キャラクター A に情報 B を表示させたいと考えています。現在のコードは次のとおりです。
HTML:
//Chapters/Events where characters move. Need info to change on chapter move
<a href="#" onclick= "chapter1();">1-prologue</a>
<a href="#" onclick= "chapter2();">2</a>
<a href="#" onclick= "chapter3();">3</a>
//Characters moving on map that are onClick buttons to show info
<a href="#">
<img id="tyrion-map" src="sm_tyrion.png" /></a>
<a href="#">
<img id="catelyn-map" src="purple-small.png" /></a>
<a href="#">
<img id="bran-map" src="yello-small.png" /></a>
JS:
//tyrion
var tyrion = null;
//catelyn
var catelyn = null;
//bran
var bran = null;
function init(){
"use strict";
tyrion = document.getElementById("tyrion-map");
tyrion.style.position= 'relative';
tyrion.style.left = '50px';
tyrion.style.top = '50px';
catelyn = document.getElementById("catelyn-map");
catelyn.style.position= 'relative';
catelyn.style.left = '50px';
catelyn.style.top = '50px';
bran = document.getElementById("bran-map");
bran.style.position= 'relative';
bran.style.left = '50px';
bran.style.top = '50px';
}
//Chapter 1- prologue
function chapter1() {
"use strict";
tyrion1();
catelyn1();
prologue1();
dany1();
bran1();
jon1();
eddard1();
arya1();
sansa1();
}
//Chapter 2
function chapter2() {
"use strict";
tyrion2();
catelyn2();
dany1();
bran2();
jon2();
eddard2();
arya1();
sansa1();
prologue2();
}
//Chapter 3
function chapter3() {
"use strict";
tyrion3();
catelyn1();
dany1();
bran3();
jon3();
eddard3();
arya1();
sansa1();
prologue2();
}