如何用同一個按鈕啓動多個單獨的功能？

Question

我正在開發一個交互式小說項目，允許用戶通過故事選擇多個路徑。我有一個與敘述（#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>

Answer 2

只需要設置新的人之前清除以前設置的onMouseUp事件。

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