Javascript 如何使用同一按钮启动多个单独的功能？

我正在进行一个互动小说项目，该项目允许用户通过故事选择多种途径。我有一个带有叙述的div（#bigtext）和一个包含三个选项的框（#Option1、#Option2、#Option3-都用HTML span元素指定），单击一个选项会激活一个函数，该函数会更新故事下一个“页面”的文本和选项。每个“页面”都有不同的功能，这意味着我可以完全控制背景，所以刷新页面是不可能的

当我点击一个选项时，它会激活该功能。所有文本都会淡出，通过javascript更新，然后再次淡入。我的问题是，当我再次单击按钮时，它不仅调用所需的函数，而且调用为上一个按钮指定的函数。我附上了一个代码示例来演示

这是更新故事的功能

我对故事的每个“页面”重复这一点，因此序言2是下一个函数或“页面”。

这是我的HTML，我想保留它，因为它非常精简（在我看来）

---

我发现，当我进入“Prologue2”时，当我点击该选项时，它不仅调用了“Prologue3”，而且再次调用了“Prologue2”，因为我之前使用了相同的按钮来指定该函数。有没有更好的方法，我可以这样做，或者在使用之前的函数后以某种方式删除它？

如果我是你，我不会一直保留相同的

#OptionX

元素，因为你永远不知道，你可能希望对某些“场景”有不同数量的选项。相反，您可以动态创建这些选项

另外，祝你的项目好运。我以前也想过，但是写每一个场景都需要大量的工作，你需要提前考虑你可能需要什么（环境变量，例如：用户以前做过什么吗？）

以下是我将如何做到这一点（为这个糟糕的故事感到抱歉）：

//您可以在故事中使用的变量
var env，
//页面列表
页数=[
// 0
{
bigtext:function（）{
return“向您赠送两扇门”
+（环境门已打开？”（再次）：“”）
+“。你想开哪一家？”；
},
回调：函数（）{
env.doorOpened=true；
},
选项：[
{text:“门A”，回调：function（）{goToPage（1）；}，
{text:“门B”，回调：function（）{goToPage（2）；}
]
},
// 1
{
bigtext:function（）{
return“该死，里面有只老虎！”
+（环境管理局局长：“猫更友好了！”：“”）；
},
选项：[
{text:“关门”，callback:function（）{goToPage（0）；}，
{text:“无论如何都要进去”，回调：function（）{goToPage（3）；}
]
},
// 2
{
bigtext:function（）{
return“真奇怪，有只猫在那里弹吉他……”；
},
回调：函数（）{
env.metTheCat=true；
},
选项：[
{text:“听他说”，callback:function（）{goToPage（4）；}，
{text:“返回”，回调：function（）{goToPage（0）；}
]
},
// 3
{
bigtext:function（）{
return“你刚刚死了，你在想什么？！”；
},
选项：[
{text:“重新启动”，回调：function（）{resetGame（）；}
]
},
// 4
{
bigtext:function（）{
return“这是一首好听的音乐。谁会想到猫会演奏得这么好？”；
},
选项：[
{text:“返回”，回调：function（）{goToPage（0）；}
]
}
];
//在页面加载时启动游戏
美元（游戏）；
/*
*重置变量并显示第一页
*/
函数resetGame（）{
环境={
当前页面：0，
要素：{
包装器：$（“#包装器”），
bigText:$（“#bigText”），
选项容器：$（“#选项框”）
},
userCanClick:false
};
showCurrentPage（）；
}
/*
*显示当前页面
*/
函数showCurrentPage（）{
变量页=页[env.currentPage]；
html（page.bigText（））；
env.elements.optionsContainer.html（“”）；
page.options.forEach（函数（opt）{
变量$opt=$（''+opt.text+''）；
$opt.click（函数（）{
env.userCanClick=false；
opt.callback（）；
});
env.elements.optionsContainer.append（$opt）；
});
if（page.callback）{
page.callback（）；
}
fadeIn（200，函数（）{
env.userCanClick=true；
});
}
/*
*转到第X页
*/
函数goToPage（x）{
env.elements.wrapper.fadeOut（200，函数（）{
env.currentPage=x；
showCurrentPage（）；
});
}

正文{
字体系列：Arial、Helvetica、无衬线字体；
文本对齐：居中；
填充：02rem；
}
#大文本{
字体大小：粗体；
字体大小：1.3rem；
边缘：1米；
}
.选择权{
填充：.5rem1rem；
保证金：.3rem自动；
背景#f13c14；
颜色：#fff；
最大宽度：20雷姆；
边界半径：3px；
光标：指针；
}
.选项：悬停{
背景：#de2e08；
}

.

在设置新事件之前，只需清除以前设置的所有onMouseUp事件

$('#Option1').off("mouseup");

---

你能把代码放在它调用的地方吗？

Prologue3

？非常感谢！这超出了我的预期！这是一个我脑子里想了很久的项目，我终于有时间去做了！我会给你一个学分@马特·布拉德利总是乐于助人！这是一个基本的系统，您可以在页面之间导航，同时保留一些变量的选项卡，但是如果您想要其他功能，您应该能够在int中构建它们

<div id="bigtext"> </div>
<div id="optionsbox"> 
<span id="Option1"></span> <br/>
<span id="Option2"></span> <br/>
<span id="Option3"></span> <br/>
</div>

$('#Option1').off("mouseup");