javascript - 按钮是否可以在不同的事件中更改其 onClick 信息

Question

我正在寻找一种 javascript，它允许图像/字符根据单击时所处的章节显示不同的信息。例如，在第一章中，我希望字符 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();
}

Answer 1

我不确定确切的上下文/章节内容，但看起来您可以控制更改章节并显示 onclick 章节。因此，当章节更改时，请设置一个变量，例如 onchapter1()

current_chapter = 1

然后根据current_chapter与该章节相关的显示信息的值单击图像时。