Question

我有两个文本框，一个有id，另一个有类。单击按钮时，我需要将两个文本框中的值复制到单个div中。我试过这个，但只复制了第二个框的值。

HTML

<input type="text" id="test1" value="Hello World"/>
<input type="text" class="test2" value="Hello World Jquery"/>
<input type="submit" value="Select" id="button"/>
<div id="output"></div>

的Javascript

$(document).ready(function(){   
    $('#button').click(function(){
        $('#output').text($("#test1").val());   //assigns value to your div
        $('#output').text($(".test2").val());
    });   
});

Answer 1

jQuery文本每次使用时都会覆盖该值。因此，解决方案是首先将值存储在某个变量中，然后将其写入

$(document).ready(function(){
    $('#button').click(function(){ 
        var value = $("#test1").val() + $(".test2").val();
        $('#output').text(value); //assigns value to your div 
    });
});

Answer 2

Demo

$(document).ready(function () {
    $('#button').click(function () {
        $('#output').text($("#test1").val()+$(".test2").val()); //assigns value to your div

    });
});

在您的代码中，您再次重新分配div的值，这就是为什么只有一个人使用+将它们组合起来所以两个值都会出现

Answer 3

这是一个可能的解决方案：

您可以使用jquery中的追加功能，如下所示，

$(document).ready(function(){   
$('#button').click(function(){
    var output = $('#output');
    output.empty();
    output.append($("#test1").val());   //assigns value to your div
    output.append($(".test2").val());
});   
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="test1" value="Hello World"/>
<input type="text" class="test2" value="Hello World Jquery"/>
<input type="submit" value="Select" id="button"/>
<div id="output"></div>

Answer 4

通过单击按钮放置在div中的值将test1的值放在div上，但替换为下一个值（“。test2”）。val（）;

使用此fiddle

$(document).ready(function(){   
$('#button').click(function(){
$('#output').text($("#test1").val()+$(".test2").val());    

});   
});

将2个div的值复制到单个输出div

4 个答案: