javascript - jQuery 查找元素然后将其放入逗号分隔列表中

Question

我的页面上有许多文本框，我想在单击按钮时将其中的值添加到另一个元素。但是，我当前的代码输出如下值:

Value oneValue twoValue three

我更希望他们像这样出现:

Value one, Value two, Value three

我现在的JS是这样的:

var textInput = $(".random-input").text();

$(".output-box").append(textInput);

Answer 1

问题是因为所有元素都被一起解释。要解决此问题，您可以将文本值map()到数组并join()它:

var textInput = $(".random-input").map(function() {
    return $(this).val();
}).get().join(', ');    
$(".output-box").text(textInput);

Working example

上面假设 .output-box 是一个标准元素。如果是另一个文本框，则需要使用 val(textInput)。

<小时/>

更新:2020 年 10 月

现在还可以使用 ES6 箭头函数使上面的示例更加简洁，但请注意，IE 不支持此功能。

var textInput = $(".random-input").map((i, el) => el.value).get().join(', ');    
$(".output-box").text(textInput);