Question

我正在尝试组合多个输入，然后将它们组合成一个句子/短语。这个例子将详细阐述它。

INPUT1：快乐
INPUT2：祝你生日
INPUT4：你属于动物园 INPUT5：和猴子和驴子 INPUT6：大猩猩是你

输出：
快乐，生日给你，你属于动物园，猴子和驴，大猩猩就是你

预期产出：
祝你生日快乐，你属于动物园，猴子和驴子，大猩猩就是你

我想设置一个条件，在INPUT中不会使用逗号（，）而不是空格来连接。我怎么能做到这一点？这是一个小提琴和代码。感谢所有帮助thnx

代码：

<input class="combine" id="input1" disabled="true" value="Happy"></input>
<input class="combine" id="input2" disabled="true" value="Birthday to you"></input>
<input class="combine" id="input3" disabled="true" value="You belong to the zoo"></input>
<input class="combine" id="input4" disabled="true" value="and the monkey and the donkey"></input>
<input class="combine" id="input5" disabled="true" value="The Gorilla is you"></input>
<input class="combine" id="Voltes5" disabled="true" size="75"></input>
<button id="LaserSword">Set</button>

JS

$(document).ready(function () {
    $('#LaserSword').on('click', function () {
        var form = $('.combine').not('#Voltes5');
        var val = form.map(function () {
            var value = $.trim(this.value)
            return value ? value : undefined;
        }).get();
      $('#Voltes5').val(val.join(', '))//part to be improved


    });
});

Answer 1

你可以这样建立你的句子：

$(document).ready(function () {
    $('#LaserSword').on('click', function () {
        var form = $('.combine').not('#Voltes5');
        var val = "" ;
        form.each(function (i,e) {
            var value = $.trim(this.value) ;
            if(i > 0){ // we don't add a separator for the first element
                val = val + ( i==1 ? " " : ", " ) ;
                // separator according to index
                // (you can easily extend it as you want)
            }

            val = val + (value || "") ;
        });
      $('#Voltes5').val(val)

    });
});

演示：http://jsfiddle.net/XF7K8/1/

Answer 2

如果这是一个简单的非动态场景，您可以使用简单的.slice()

来实现这一点

$('#Voltes5').val(val[0] + ' ' + val.slice(1).join(', '))

Answer 3

您可以使用以下内容：

$(document).ready(function () {
    $('#LaserSword').on('click', function () {
        var form = $('.combine').not('#input1','#Voltes5');
        var val = form.map(function () {
            var value = $.trim(this.value)
            return value ? value : undefined;
        }).get();
        $('#Voltes5').val($('#input1').val()+" "+val.join(', '))


    });
});

<强> DEMO

<强>更新

更一般地说，

$(document).ready(function () {
    $('#LaserSword').on('click', function () {
        var form = $('.combine').not('.spaceNeeded','#Voltes5');
        var val = form.map(function () {
            var value = $.trim(this.value)
            return value ? value : undefined;
        }).get();

        var spaceval = $('.spaceNeeded').map(function () {
            var value = $.trim(this.value)
            return value ? value : undefined;
        }).get();

        $('#Voltes5').val(spaceval.join(' ')+" "+val.join(', '))


    });
});

将类spaceNeeded添加到html元素：

<input class="combine spaceNeeded" id="input1" disabled="true" value="Happy"></input>

<强> DEMO

Answer 4

$(document).ready(function () {
    $('#LaserSword').on('click', function () {
        var res = []
        $('.combine').not('#Voltes5').each(function() {
         res.push($(this).val())
        })
        $('#Voltes5').val(res.join(',').replace(/,/, ' '))
    });
});

demo

组合来自不同输入的数组

4 个答案: