使用jquery组合文本？

Posted 2023-03-27

【中文标题】使用jquery组合文本？

【英文标题】：Combine text using jquery?

【发布时间】：2015-05-28 18:00:47

【问题描述】：

我想使用 jquery 组合文本，这是我的代码：

<textarea id="input1" rows="4" style="width:100%; margin-top:10px; height:100px; resize:none;" placeholder="Text 1" wrap="off"></textarea>
<textarea id="input2" rows="4" style="width:100%; margin-top:10px; height:100px; resize:none;" placeholder="Text 2" wrap="off"></textarea>
<textarea id="input3" rows="4" style="width:100%; margin-top:10px; height:100px; resize:none;" placeholder="Text 3" wrap="off"></textarea>
<textarea id="ouput" rows="4" style="width:100%; margin-top:10px; height:100px; resize:none;" placeholder="Output" wrap="off"></textarea>
<button id="process" type="button" name="clicknow">Generate!</button>

jquery：

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$('#process').on('click', function()
var test1 = $('#test1').val();
var test2 = $('#test2').val();
var test3 = $('#test3').val();
$('textarea#output').append(test1+test2+test3);
    );
</script>

输入 1：

1-1

2-2

3-3

输入 2：

4-4

5-5

6-6

输入 3：

7-7

8-8

9-9

输出：

1-1 4-4 7-7

2-2 5-5 8-8

3-3 6-6 9-9

【问题讨论】：

jQuery 部分在哪里

$("#input1").val(); 获取输入的值。

@DyrandzFamador，我编辑了我的帖子

@j2query，检查我的答案，它会输出预期的结果，对您来说具有挑战性的部分是使其动态化。祝你好运:)

【参考方案1】：

http://jsfiddle.net/bsarunmca/2bfz5qLa/ -- 检查这个文件。

$('#process').click(function()
    $('#ouput').val($('#input1').val() + ' ' + $('#input2').val() + ' ' +  $('#input3').val());
);

【讨论】：

我想要像我的帖子一样的输出

【参考方案2】：

这是一个很好的编程习惯。如果可行，请参阅此小提琴： https://jsfiddle.net/5cz3rtmb/4/

我添加了一些 JS 函数来完成这项工作：

$("#process").click(function() 
    var outputText = getOutput(
        $("#input1").val(),
        $("#input2").val(),
        $("#input3").val()
    );
    $("#output").html(outputText); 
);

【参考方案3】：

试试这个。只需进行一些调整以使其具有动态性

小提琴：http://jsfiddle.net/9eps8x06/

$('#process').click(function()

    var lines1 = $('#input1').val().split('\n'); 
    var lines2 = $('#input2').val().split('\n');
    var lines3 = $('#input3').val().split('\n');
    var output=''; 

    output += lines1[0] +  lines2[0] + lines3[0]+'\n';
    output += lines1[1] +  lines2[1] + lines3[1]+'\n';
    output += lines1[2] +  lines2[2] + lines3[2]+'\n';

   $('#output').val(output); 
);