Question

我有一个元素列表，两个用户输入字段和两个按钮。用户在第一个输入字段中输入一个值，然后单击该按钮。输入的值应附加到现有列表中，并且还应反映在输入字段下方提供的空间中。所有添加的值应形成逗号分隔的字符串。

前：汽车，自行车，公共汽车

如何使用jquery连接作为用户输入值的变量以形成逗号分隔的行？

HTML：

    <ol id="list">...</ol> 

    <input class="Add">
    <button id="btn1"> Add </button>
    Added item : <div class="Additem"></div>

Jquery的：

$("#btn1").click(function(){
var additem = $(".Add").val();
$("#list").append("<li>" + additem + "</li>");
$(".Additem").append("<div>" + additem + "</div>");

上面代码中的第4行将变量附加到不同的行中。

以上操作显示了将用户输入值附加到列表的方法。删除作为列表一部分的用户输入值的方法是什么？

Answer 1

你可以这样做：

＆＃13;

$("#btn1").click(function(){
    var additem = $(".Add").val();
    $("#list").append($("<li>").text(additem));
    $(".Additem").text(($(".Additem").text() + ', ' + additem).replace(/^, /, ''));
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ol id="list"></ol> 
<input class="Add">
<button id="btn1"> Add </button><br>
Added item : <div class="Additem"></div>

＆＃13;

解释

', ' + additem的添加不需要解释，但会产生以,开头的字符串，而逗号应仅出现在项目之间。这可以通过多种方式解决，但在这里我已应用replace从字符串的开头删除任何此类逗号：

.replace(/^, /, '')

正斜杠（/）分隔正则表达式文字。插入符号（^）要求匹配的字符位于字符串的开头。字面意思是逗号和空格。因此，如果在字符串的开头找到逗号空间序列，则在''方法的返回值中将其替换为replace。

替代

如果你开始在列表中添加空值，上面的解决方案会从字符串表示中修剪它们。因此，如果在这种情况下，当列表显示5个条目（前三个空）时，您希望看到, , , hello, world（而不是hello, world），那么您可以使用此代码：

＆＃13;

$("#btn1").click(function(){
    var additem = $(".Add").val();
    $("#list").append($("<li>").text(additem));
    $(".Additem").text($("#list li").map(function () {
        return $(this).text();
    }).get().join(', '));
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ol id="list"></ol> 
<input class="Add">
<button id="btn1"> Add </button><br>
Added item : <div class="Additem"></div>

＆＃13;

Answer 2

尝试

$(".Additem").text($(".Additem").text() + ', ' + additem)

而不是你的第4行。

以逗号分隔的字符串连接 - Jquery

2 个答案:

解释

替代