Javascript Jquery：将多个用户输入合并到一个文本区域？

我试图将多个用户输入放在一起，然后在单击按钮后将它们合并到一个文本区域中

例如： 用户1：嘿，我刚认识你
用户2：这太疯狂了
用户3：但这是我的电话号码，也许打电话给我吧

组合结果：
嘿，我刚认识你，这太疯狂了，但这是我的电话号码，也许打电话给我吧

下面是我的代码按钮点击目前不起作用，但当我在它起作用之前尝试它时，我想我的Jquery出现了一些问题，触发了这个不寻常的结果：

HTML和导入：

      <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

      <input class="combine" id="input1" disabled="true"></input>
      <input class="combine" id="input2" disabled="true"></input>
      <input class="combine" id="input3" disabled="true"></input>
      <input class="combine" id="input4" disabled="true"></input>
      <input class="combine" id="input5" disabled="true"></input>
      <input class="combine" id="input6" disabled="true"></input>

      <input class="combine" id="Voltes5" disabled="true" size="45"></input>


      <button id="setVal">Set</button>

阿伦·约翰尼爵士最新消息

用户1：如果有（组合时没有逗号）
用户2：将
用户3：有一种方法

综合结果： 如果有意愿，就有办法替换

$（'.Voltes5'）.append（$（this.text（）+''）；

与

试一试

演示：

---

.text（）将给出元素的文本，对于输入值，您必须使用.val（）

，因此代码中存在一个直接的大问题，即您将

Voltes5

元素作为类而不是ID引用。您需要的jQuery选择器是：

#Voltes5

而不是：

.Voltes5

不过，出于功能和最佳实践的考虑，还有其他一些事情需要考虑。首先，

Voltes5

元素也有类

combine

，这意味着

$（'.combine'）。每个（）

调用都将包含此元素。这样做的结果是，在运行代码时（或者在运行代码时进行上述更正），它也会将其当前文本附加到自身

获取输入元素的当前输入文本时，您需要的是jQuery

.val（）

调用，而不是

.text（）

——有关更多讨论，请参阅

另一件需要注意的事情是，您应该真正明确地指定这些元素是什么类型的

input

<代码>比

更可取

最后，

input

是一个空元素（），这意味着在开始标记和结束标记之间不应该有任何内容。理想情况下，你甚至不会给出一个结束标记；只有开始标记，或自动关闭：

---

HTH

这里有一种方法可以做到这一点：

$('#setVal').on('click', function () {
    $(".combine[id^=input]").each(function () {
        if(this.value) {
            $("#Voltes5")[0].value += ' ' + this.value;
        }
    });
});

---

有几种不同的方法可以做到这一点

我会使用数组这样做：

$(document).ready(function () {
    $('#setVal').on('click', function () {
        //create an array for the values
        var inpAry = [];

        $('.combine').each(function () {
            //add each value to the array
            inpAry.push($(this).val+' ');
        });
        //set the final input val 
        $('#Voltes5').val(inpAry);
    });
});

但是您需要从

#setVal

中删除

合并

类，因为该类将包含在

中。每个

通过这种方式，还可以在
keyup
上更新最后一个框，因为我不只是附加值，每次都会设置组合值。
这里有一个不可读性的一行代码；）

扩大：

$('#setVal').click(function(){
$('#Voltes5').val(
  $('.combine')
  .not('#Voltes5')
  .map(
    function(){
      return $(this).val();
    })
  .get()
  .join('')
);
});

熟练地使用它：
我做了，先生，但它不起作用，我正在调整一些东西。如果获得更多信息，我将更新问题。没有讨论为什么这是一个更好的方法，或者为什么OP应该删除联合收割机分类我希望实际阅读注释代码就足够了@unwitting你应该看看什么时候以及为什么应该使用向下投票。。。我不会说我的答案符合这个标准。我不这么认为-代码中没有关于combine类的注释，你的编辑更具信息性。如果我感谢你的答案，它确实解决了我的问题，但我不能接受它，如果不理解它，我能问一下这行返回值发生了什么吗？值：未定义？再次感谢you@user3046019 ? 是一个三元运算符，读起来像if-else语句。该语句也可以这样读-
if（value）{returnvalue}else{returnundefined}如果有返回值，则返回未定义的值。这里有一个关于三元运算符->@user3046019的问题，这是一个三元运算符。。。如果输入元素为空，那么我们不想将空值添加到
vals
数组中，因此我们返回unfinedsir。我可以问一下，我是否可以设置一个条件，其中第一个用户输入在组合时没有逗号（，），其余的将有逗号？我很抱歉问了这个问题，我只是想把它做完谢谢you@user3046019对不起，你能再解释一下这个要求吗。。如有可能，请提供样品
.Voltes5

<input>
<input />

$('#setVal').on('click', function () {
    $(".combine[id^=input]").each(function () {
        if(this.value) {
            $("#Voltes5")[0].value += ' ' + this.value;
        }
    });
});

$(document).ready(function () {
    $('#setVal').on('click', function () {
        //create an array for the values
        var inpAry = [];

        $('.combine').each(function () {
            //add each value to the array
            inpAry.push($(this).val+' ');
        });
        //set the final input val 
        $('#Voltes5').val(inpAry);
    });
});

$('#setVal').click(function(){$('#Voltes5').val($('.combine').not('#Voltes5').map(function(){return $(this).val();}).get().join(''))});

$('#setVal').click(function(){
$('#Voltes5').val(
  $('.combine')
  .not('#Voltes5')
  .map(
    function(){
      return $(this).val();
    })
  .get()
  .join('')
);
});