Question

我有这段代码：

 Image height: <input type="text" id="imgHeight" /><br /><br />
 Image width:  <input type="text" id="imgWidth" /><br /><br />
 Number of images: <input type="text" id="imgNo" /><br /><br />
    <input type="button" value="Show code" id="result" /><br /><br />

    <textarea rows="20" cols="60" id="output"></textarea>
    <script>
    $(document).ready(function(){
        $("#result").click(function(){
            var imgHeight = $("#imgHeight").val();
            var imgWidth = $("#imgWidth").val();
            var imgNo = $("#imgNo").val();
            for(i=0; i<imgNo; i++){
                $("#output").text("<img src='' width='"+imgHeight+"' height='"+imgWidth+"' />");
            }
            });
        });
    </script>

我想做的是能够将html代码作为纯文本输出到textarea（我希望人们能够复制生成的代码）。我希望img标签在文本区域中显示的次数与我在“图像数量”框中指定的次数相同。无论我输入的“图像数量”如何，上面的代码仅将代码输出为文本一次。你能帮帮我吗？ Thx提前

[编辑] 的非常感谢您的快速回复现在我遇到了不同的事情。我希望用户能够放置他们自己的链接，我希望这些链接出现在创建的每个图像标签内的textarea中。但是，我想不出一种方法来“抓住”每个输入的内容并将其放入标签中。它始终显示第一个输入的内容有什么帮助吗？ :) 这是代码：

 Image height: <input type="text" id="imgHeight" /><br /><br />
 Image width:  <input type="text" id="imgWidth" /><br /><br />
 Number of images: <input type="text" id="imgNo" /><br /><br />
 <p id="additionalImgs"></p>
    <input type="button" value="Show code" id="result" onclick="abba()" /><br /><br />  
    <textarea rows="20" cols="60" id="output"></textarea>
    <script>
    $(document).ready(function(){
        $("#result").click(function(){
            var imgHeight = $("#imgHeight").val();
            var imgWidth = $("#imgWidth").val();
            var imgNo = $("#imgNo").val();
            var text = '';
            var y = 1;
            for(i=0; i<imgNo; i++){
            var aaa = $("#additionalImgs input").val();
            text += "<img src='"+aaa +"' width='"+imgHeight+"' height='"+imgWidth+"' name='"+ y++ +"' />";
}
$('#output').text(text);

            });
        });
$(document).ready(function(){
            $("#imgNo").change(function(){
                var imgNo = $("#imgNo").val();
                x = 1;
                var y = 1;
                var text = "Image number: ";
                for(i=0; i<imgNo; i++){
                $("#additionalImgs").append(text + y++ + ' link' + "<input type='text' name='"+ x++  +"'><br />")};
                });
            });

    </script>

Answer 1

.text()会覆盖元素中的当前文本。您可以使用.append()或将文本附加到变量，并在for循环后将该变量应用.text()：

var text = '';
for(i=0; i<imgNo; i++){
    text += "<img src='' width='"+imgHeight+"' height='"+imgWidth+"' />";
}
$('#output').text(text);

Answer 2

您忘记附加文本，在每次迭代中设置文本，它不会附加。按如下方式更改循环体：

txt=$("#output").text();
$("#output").text( txt + "<img src='' width='"+imgHeight+"' height='"+imgWidth+"' />");

Answer 3

您可以获取IMG标记的“外部HTML”并将其放在如下的文本框中：

var html = $('<div>').append($('#imageID').clone()).html();
$("#textboxID").val(html);

这是基于Box9的回答：jQuery: outer html()

参见JS Fiddle的演示：http://jsfiddle.net/VUbfh/1/

在jQuery中将html标记输出为文本

3 个答案: