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

Question

我正在开发一个交互式小说项目，该项目允许用户选择故事的多个路径。我有一个带有叙述性的 div (#bigtext) 和一个包含三个选项的框(#Option1、#Option2、#Option3 - 全部用 HTML span 元素指定)，单击一个选项会激活一个功能，该功能会更新文本和故事下一个“页面”的选项。每个“页面”都是不同的功能，这意味着我可以完全控制后台，因此刷新页面是不可能的。

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

这是更新故事的功能。

    function Prologue(){
//Narrative Goes Here
    document.getElementById("bigtext").innerHTML = "STORY HERE";        
//Options/Inputs go Here
    document.getElementById("Option1").innerHTML = "CONTINUE";  
    document.getElementById("Option2").innerHTML = "";
    document.getElementById("Option3").innerHTML = "";  

//Entrance animations go here
$("#bigtext").delay(1500).fadeToggle(1000); 
$("#optionsbox").delay(2000).fadeToggle(1000);  

//On Option Clicked

//Option 1
$('#Option1').mouseup(function() { 
$("#bigtext").fadeToggle(1000); 
$("#optionsbox").fadeToggle(1000);  
     setTimeout(Prologue2, 1500);
    });

        }

我对故事的每个“页面”重复此操作，因此 Prologue2 是下一个函数或“页面”。

这是我的 HTML，我想保留它，因为它非常精简(无论如何在我看来)

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

我发现，当我到达“Prologue2”时，当我单击该选项时，它不仅调用“Prologue3”，而且还会再次调用“Prologue2”，因为我之前使用相同的按钮来指定该功能。有没有更好的方法可以解决这个问题，或者在使用之前的函数后以某种方式删除它？

Answer 1

如果我是你，我不会一直保留相同的 #OptionX 元素，因为你永远不知道，你可能希望为某些“场景”拥有不同数量的选项。相反，您可以动态创建这些选项。

另外，祝您的项目顺利。我过去曾想过这一点，但编写每个场景需要大量工作，并且您需要提前考虑可能需要什么(例如环境变量，即:用户之前做了什么事情吗？)

这是我的做法(抱歉，这个故事很糟糕):

    // Variables you can use in your story
var env,
    // Page list
    pages = [
    // 0
    {
        bigtext: function(){
            return "Two doors are presented to you"
                 + (env.doorOpened ? " (again)" : "")
                 + ". Which one would you like to open?";
        },
        callback: function(){
            env.doorOpened = true;
        },
        options: [
            {text: "Door A", callback: function(){ goToPage(1); }},
            {text: "Door B", callback: function(){ goToPage(2); }}
        ]
    },
    // 1
    {
        bigtext: function(){
            return "Damn it, there's a tiger in there!"
                 + (env.metTheCat ? " The cat was more friendly!" : "");
        },
        options: [
            {text: "Close the door", callback: function(){ goToPage(0); }},
            {text: "Go in anyway", callback: function(){ goToPage(3); }}
        ]
    },
    // 2
    {
        bigtext: function(){
            return "That's odd, there's a cat playing the guitar in there...";
        },
        callback: function(){
            env.metTheCat = true;
        },
        options: [
            {text: "Listen to him", callback: function(){ goToPage(4); }},
            {text: "Go back", callback: function(){ goToPage(0); }}
        ]
    },
    // 3
    {
        bigtext: function(){
            return "You just died. What were you thinking?!";
        },
        options: [
            {text: "Restart", callback: function(){ resetGame(); }}
        ]
    },
    // 4
    {
        bigtext: function(){
            return "That was some good music. Who would have thought a cat could play this well?";
        },
        options: [
            {text: "Go back", callback: function(){ goToPage(0); }}
        ]
    }
];

// Start a game on page load
$(resetGame);


/*
 * Reset variables and display first page
 */
function resetGame(){
    env = {
        currentPage: 0,
        elements : {
            wrapper: $('#wrapper'),
            bigText: $('#bigtext'),
            optionsContainer: $('#optionsbox')            
        },
        userCanClick: false
    };
    showCurrentPage();
}

/*
 * Display current page
 */
function showCurrentPage(){
    var page = pages[env.currentPage];
    env.elements.bigText.html(page.bigtext());
    env.elements.optionsContainer.html('');
    page.options.forEach(function(opt){
        var $opt = $('<div class="option">'+opt.text+'</div>');
        $opt.click(function(){
            env.userCanClick = false;
            opt.callback();
        });
        env.elements.optionsContainer.append($opt);
    });
    if(page.callback){
        page.callback();
    }
    env.elements.wrapper.fadeIn(200, function(){
        env.userCanClick = true;
    });
}

/*
 * Go to page number X
 */
function goToPage(x){
    env.elements.wrapper.fadeOut(200, function(){
        env.currentPage = x;
        showCurrentPage();
    });
}

body{
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    padding: 0 2rem;
}
#bigtext{
    font-weight: bold;
    font-size: 1.3rem;
    margin: 1em;
}
.option{
    padding: .5rem 1rem;
    margin: .3rem auto;
    background: #f13c14;
    color: #fff;
    max-width: 20rem;
    border-radius: 3px;
    cursor: pointer;
}
.option:hover{
    background: #de2e08;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
    <div id="bigtext"></div>
    <div id="optionsbox"></div>.
</div>