0

我有这个代码：

 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 标签在文本区域中显示的次数与我在“图像数量”框中指定的次数一样多。无论我输入的“图像数量”如何，上面的代码都只将代码作为文本输出一次。你能帮我吗？提前谢谢

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

 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>
4

3 回答 3

1

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

var text = '';
for(i=0; i<imgNo; i++){
    text += "<img src='' width='"+imgHeight+"' height='"+imgWidth+"' />";
}
$('#output').text(text);
于 2013-05-10T08:51:02.203 回答
0

您忘记附加文本，在每次迭代中它都会设置文本，而不是附加。改变你的循环体如下：

txt=$("#output").text();
$("#output").text( txt + "<img src='' width='"+imgHeight+"' height='"+imgWidth+"' />");
于 2013-05-10T08:53:32.070 回答
-1

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

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

这是基于 Box9 在以下位置的回答：jQuery: external html()

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

于 2013-05-10T08:49:40.563 回答