Question

我尝试创建一个包含主内容div的页面，用户可以选择不同的选项来添加不同的附加内容。添加的内容将提供添加更多不同内容的选项。最终目标是制作一个简短的互动故事。

编辑以反映我仍然无法开展工作的部分新方法。

我目前的代码如下：

<div id="ongoingStory">
   <p>You're standing in a place.  There are whatever items here and one or more exits.</p>  
   <p>Do you want to take <span id="action1">action 1</span> or <span id="action 2">action 2</span>?</p>
</div>

var oneResult = "<p>You take action 1, and some stuff happens.  You can then take <span id=\"action3\">action 3</span> or <span id=\"action4\">action 4</span>.</p>";
var anotherResult = "<p>You take action 2, and other stuff happens.  You can then take <span id=\"action5\">action 5</span> or <span id=\"action6\">action 6</span>.</p>";

var root;
var branch;

function addToStory( root,branch ) {
   $( "#" + root ).addClass( "disabled" );
   $( branch ).appendTo( "#ongoingStory" ).hide().fadeIn(1000);
}

document.getElementById( "ongoingStory" ).addEventListener("click", moveAlong, false);

function moveAlong(e) {
   if (e.target !== e.currentTarget) {
      switch (e.target.id) {
         case action1:addToStory( action1,oneResult );break;
         case action2:addToStory( action2,anotherResult );break;
         case action3:addToStory( action3,otherResult );break;
         case action4:addToStory( action4,yetOtherResult );break;
      };
   };
   e.stopPropagation();
}

页面加载没有任何错误，但是当我单击最初在ongoingStory div中加载的内容中的操作时没有任何反应。然后控制台告诉我＆＃34; ReferenceError：action3未定义。＆＃34;当然不是，因为包含该动作/ id标签的内容不会被添加。我不明白的是它为什么不首先附加内容。我以为我可能没有引用跨度＆＃39; ID是正确的，但在这种情况下，我希望切换卡在action1上。

Answer 1

您的代码中存在很多问题。我们covered the best practices in the chat room.就实际问题而言，您遗漏了一些引号：

case action1:addToStory( action1,oneResult );break;

需要成为：

        case 'action1':
            addToStory('action1', oneResult);
            break;

（所有其他行动都相同）

这是一个JSFiddle：http://jsfiddle.net/somekittens/70qebhbm/

使用appendTo（）并切换以将变量中的内容添加到div

1 个答案: