Question

我已经尝试了几种方式，但我似乎错过了一些简单的事情。我想要的是当用户输入他们的输入（即Take Sword）输出（＆＃34;你现在有一把剑＆＃34;）出现在最后一个输出的顶部。

所以如果你的前两个命令是：

Go East
Go South

然后您的输出显示为：

你现在在南方房间。
你现在在EAST房间。

以下是我使用的代码：

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

我在这条线上试过了很多东西：

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

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

这两个问题都产生了两个问题：

它接受我输入的任何内容（向东）并将其显示在页面上IN ADDITION到输出（Go east。你现在在EAST房间里。）
虽然输入的内容我不想要正确的堆栈，但我想要的输出内容却没有。（即每个新输出都低于上一个输出）。

我希望这是有道理的。这是我所拥有的一个小提琴：https://jsfiddle.net/megler/a1fjd5gd/9/

出于某种原因，我无法正确运行小提琴，但代码在我本地工作。

我知道输入和$（＆＃34; #commandLine ...＆＃34;）是不正确的，但我不知道该把它放在什么位置以拉出输出后来的功能。

这是我正在谈论的截图：

我需要＆＃34;去东部＆＃34;并且＆＃34;拿剑＆＃34;离开，然后上面的线按顺序切换。

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

那小提琴怎么样？

我使用以下

更改了properDisplay方法

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

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

将新文字放在旧文字

3 个答案: