在舊文本的頂部放置新文本

Question

我已經嘗試了這種方法，我似乎錯過了一些簡單的東西。我想要的是當用戶輸入他們的輸入時（即Take Sword），輸出（「你現在有一把劍」）出現在最後一個輸出的頂部。

所以，如果你的第一個2級的命令是：

1. 正東

2. 南歸

然後爲你的輸出就會出現：

1. 你是現在在南房間。
2. 你現在在EAST房間。

下面是我使用的代碼：

$("form").submit(function() { 
var input = $("#commandLine").val(); 
$("#placeholder").prepend($("<span class='line'>" + "</span>")); 

我試圖在這條線多件事情：

$("#placeholder").prepend($("<span class='line'>" + "</span>"));

包括input和$("#commandLine").val()

兩個那些造成2個問題：

1. 無論我輸入什麼東西（往東走），都會顯示在輸出的附加頁面上。你現在在EAST房間）。
2. 雖然輸入的東西我不想正確堆疊，我想要的輸出的東西沒有。 （即，每個新的輸出低於不高於先前的輸出）。

我希望這是有道理的。這裏是我有什麼小提琴：https://jsfiddle.net/megler/a1fjd5gd/9/

出於某種原因，我不能讓小提琴正常運行，但代碼在本地爲我工作。

我知道輸入和$（「＃commandLine ...」）是不正確的，但我不知道該把它放在後面的函數的輸出中。

這裏就是我談論的截圖：

我需要「向東走」和「劍走」走開及以上的線路，以便切換。

Answer 1

第一：您的小提琴中出現語法錯誤。 5號線：

$("#placeholder").prepend($("<span class='line'>" + input "</span>")); 

應該是：

$("#placeholder").prepend($("<span class='line'>" + input + "</span>")); 

這裏是一個updated Fiddle

二：您旅遊功能缺失的變量。

var travel = function(direction) { 
    var newRoom = rooms[currentRoom.paths[direction]]; 
    if (!newRoom) { 
     $("<p>You can't go that way.</p>").properDisplay(); 
    } 
    else { 
     currentRoom = newRoom; 
     $("<p>You are now in the " + currentRoom.name + " Room.</p>").properDisplay(); 
    } 
}; 

該函數不具有rooms變量或currentRoom變量。你將需要定義那些功能正常工作的地方。

第三：我添加了一個新的div #actions，將允許您使用properDisplay()功能是這樣的：

$.fn.properDisplay = function() { 
    return $("#actions").prepend(this).fadeIn(1000); 
    // return this.hide().insertBefore("#placeholder").fadeIn(1000); 
}; 

爲了您的淡入淡出效果以及：

return $("#actions").prepend(this).hide().fadeIn(1000); 

更新小提琴：https://jsfiddle.net/a1fjd5gd/12/

更新：

$.fn.properDisplay = function() { 
    this.addClass("line"); 
    return $("#actions").prepend(this).hide().fadeIn(1000); 
}; 

更新小提琴：https://jsfiddle.net/a1fjd5gd/14/

Answer 2

如果更換

$("#placeholder").prepend(); 

通過

$("#col1").prepend(); 

輸出將正確堆疊上面顯示前面的信息。

Answer 3

什麼是小提琴？

我用下面的

$.fn.properDisplay = function() { 
    $("#col1").prepend(this); 
    $(this).hide().fadeIn(1000); 
    return true; 
}; 

https://jsfiddle.net/a1fjd5gd/11/