Wie starten Sie mehrere separate Funktionen mit der gleichen Taste?

Question

Ich arbeite an einem interaktiven Fiction-Projekt, bei dem der Benutzer mehrere Wege durch die Geschichte wählen kann. Ich habe ein div mit der Erzählung (#bigtext) und eine Box mit drei Optionen (# Option1, # Option2, # Option3 - alle mit HTML span elements) und das Klicken auf eine Option aktiviert eine Funktion, die sowohl den Text als auch den Text aktualisiert Optionen für die nächste "Seite" der Geschichte. Jede "Seite" ist eine andere Funktion, was bedeutet, dass ich die volle Kontrolle über den Hintergrund haben kann. Eine Aktualisierung der Seite kommt also nicht in Frage.

Wenn ich auf eine Option klicke, wird die Funktion aktiviert. Der gesamte Text wird ausgeblendet, wird über Javascript aktualisiert und dann wieder eingeblendet. Mein Problem ist, dass wenn ich erneut auf die Schaltfläche klicke, es nicht nur die gewünschte Funktion aufruft, sondern auch die, die für die vorherige Schaltfläche bestimmt ist. Ich habe ein Beispiel des Codes beigefügt, um zu demonstrieren.

Dies ist die Funktion, die die Geschichte aktualisiert.

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); 
    }); 

     } 

ich wiederhole dies für jede „Seite“ der Geschichte, so Prologue2 die nächste Funktion oder „Seite“ ist.

Hier ist mein HTML, die ich, da es ziemlich rationalisierte (ohnehin in meinen Augen)

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

ich, dass ich auf „Prologue2“ erhalten, indem die Zeit gefunden habe, ist halten möchten, es ruft nicht nur "Prologue3" auf, wenn ich auf die Option klicke, sondern auch "Prologue2", da ich zuvor dieselbe Taste benutzt habe, um diese Funktion zu bezeichnen. Gibt es einen besseren Weg, auf dem ich das machen könnte oder die vorherige Funktion entfernen könnte, nachdem sie benutzt wurde?

Answer 1

Wenn ich Sie wäre, würde ich nicht die gleichen #OptionX Elemente den ganzen Weg halten, weil Sie nie wissen, möchten Sie vielleicht verschiedene Anzahl von Optionen für einige "Szenen" haben. Stattdessen können Sie diese Optionen dynamisch erstellen.

Auch viel Glück mit Ihrem Projekt. Ich habe in der Vergangenheit daran gedacht, aber es ist eine Menge Arbeit, jede Szene zu schreiben, und Sie müssen vorausdenken, was Sie brauchen könnten (zum Beispiel Umgebungsvariablen, dh: Hat der Benutzer vorher etwas gemacht?)

Hier ist, wie ich tun würde, es (sorry für die schlechte Geschichte):

// 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

Nur alle vorher gesetzten onMouseUp Ereignisse löschen müssen, bevor die neue Einstellung.