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

时间:2016-12-17 13:15:46

标签: jquery

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

前:汽车,自行车,公共汽车

如何使用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行将变量附加到不同的行中。

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

2 个答案:

答案 0 :(得分:2)

你可以这样做:

&#13;
&#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;
&#13;
&#13;

解释

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

.replace(/^, /, '')

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

替代

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

&#13;
&#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;
&#13;
&#13;

答案 1 :(得分:0)

尝试

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

而不是你的第4行。