同じボタンで複数の別々の機能を起動する方法は？

Question

私は、ユーザーがストーリーを通して複数の経路を選択できるようにするインタラクティブなフィクションプロジェクトに取り組んでいます。 （＃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");