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

Question

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

当我点击一个选项时，它会激活该功能。所有文本都淡出，通过 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>

Answer 2

只需要在设置新事件之前清除任何以前设置的 onMouseUp 事件。

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