Question

我试图创建每次点击按钮时动态添加div容器的网页，这样做很好。如果我单击按钮两次，则会创建两个容器，一个在另一个之上。但是，问题在于我尝试使用特定功能追加和修改每个特定容器内的内容。

在某种程度上，我知道我只是试图为每个特定的＆＃34;实例＆＃34;运行一个函数。点击。例如，如果我单击按钮一次，则会显示一个新框，并且＆＃34;嗨＆＃34;半秒后出现在盒子里面。如果我再次点击该按钮，则会显示另一个框，并且＆＃34;嗨＆＃34;半秒后出现在那个盒子内 - 不影响第一个盒子。我的代码目前看起来像这样：

$("#submit").click(function(){
    var parentContainer = $("<div class = 'actualstatus'></div>");
    parentContainer.hide().appendTo("#wrapper").fadeIn(1500);

    function add(){
        $("#actualstatus").append("<p>Hi</p>");
    };
    setTimeout(add,500);
});

现在的问题是我正在创建一个名为parentContainer的div容器，其中包含一个类＆＃39; actualstatus＆＃39;，因此所有新创建的div都将具有相同的类名。因此，每次点击，所有parentContainers都会得到一个＆＃34; Hi＆＃34;添加到他们 - 即使是旧的。现在，我想知道如何

以某种方式区分新创建的div容器或
仅针对特定实例运行函数。我已经尝试使用$（this）元素来附加＆＃34;嗨＆＃34;但我不确定它是否可行，或者我是否使用了正确的行话。请帮忙！

Answer 1

只需引用您刚创建的元素，即parentContainer：

function add(){
    parentContainer.append("<p>Hi</p>");
}

Answer 2

最简单的解决方案IMO将新div传递给你的函数，以便只有那个div被定位。

$("#submit").click(function(){
    var parentContainer = $("<div class = 'actualstatus'></div>");
    parentContainer.hide().appendTo("#wrapper").fadeIn(1500);

    function add(newdiv){
        newdiv.append("<p>Hi</p>");
    };
    setTimeout(function(){add(parentContainer)},500);
});

<强> jsFiddle example

为新创建的div的每个特定实例运行函数？

2 个答案: