Question

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

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

这是更新故事的功能。

OperatorFactory

我为故事的每个“页面”重复一遍，因此Prologue2是下一个功能或“页面”。

这是我的HTML，我想保留它，因为它非常简化（无论如何我的眼睛）

    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”时，当我点击选项时它不仅会调用“Prologue3”，而且还会再次调用“Prologue2”，因为我之前使用相同的按钮来指定该功能。有没有更好的方法可以解决这个问题，或者在使用之后以某种方式删除之前的功能？

Answer 1

如果我是你，我不会一直保持相同的#OptionX元素，因为你永远不会知道，你可能希望为某些＆＃34;场景＆＃34;提供不同数量的选项。相反，您可以动态创建这些选项。

另外，祝你的项目好运。我过去曾想过这一点，但是要做很多工作，要编写每一个场景，你需要提前考虑你可能需要的东西（例如，环境变量，即：做了用户）以前做点什么？）

以下是我将如何做到这一点（对不起的故事感到抱歉）：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

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

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

2 个答案: