Jquery

Question

我想做一些'invitation list'。当我们输入其他人的电子邮件并单击 添加按钮 时，我们输入的电子邮件显示在底部。我的代码如下所示：

HTML

<input type="email" name="invite_people" placeholder="Invite someone">
<a href="#!" class="add_people">Add</a>

<div class="people_invited">
   <!--
      this element
    <div>
       <span class="people_added"></span>
    </div>
      is added by Jquery
   -->
</div>

Jquery

$(".add_people").click(function () {
            var orang_yg_diinvite = $("input[name='invite_people']").val();
            $(".people_invited").append("<div><span class='people_added'></span></div>");
            $("span.people_added").text(orang_yg_diinvite);
        });

刚刚好。但它仅在我们添加人员时才第一次起作用。当我们再次添加人员时，第一个 'add list people' 将替换为我们添加的最后一个。我想要的是每个 <span class="people_added"> 里面都有不同的文本。像 bitbucket

这样的东西

不是那样（我的结果）

请帮助我:)

Answer 1

你的代码的问题是这一行：

$("span.people_added").text(orang_yg_diinvite);

这个选择器只有第一次是独一无二的。稍后你有更多 people_added class 的跨度 - 所以你正在为所有这些跨度分配新文本。

您可以在创建新元素时附加文本，例如：

var divInnerText = "myText";
var newDiv = $("<div>" + divInnerText + "</div>");

它将产生以下元素：<div>myText</div>

您可以使用这种方法解决您的问题：

$(".add_people").click(function () {
    var orang_yg_diinvite = $("input[name='invite_people']").val();
    $(".people_invited").append("<div><span class='people_added'>" + orang_yg_diinvite + "</span></div>");
});

Answer 2

问题出在这一行

$("span.people_added").text(orang_yg_diinvite);

它所做的是用新值覆盖整个跨度元素，而不是像这样将它添加到追加函数中

$(".add_people").click(function () {
        var orang_yg_diinvite = $("input[name='invite_people']").val();
        $(".people_invited").append("<div><span class='people_added'>"+orang_yg_diinvite+ "</span></div>");

    });

link 在 jsfiddle

Jquery - 使元素连续追加而不是替换它

Jquery - Make element append continously instead of replace it

jquery-append