Question

我已经提出了一段代码，允许用户在页面上创建自己的图库。我希望用户能够放置他们自己的链接，我希望这些链接出现在他们创建的每个img标签中的textarea中，以便他们可以复制整个代码并粘贴它，例如在他们的页面上。但是，我想不出一种方法来抓住＆＃34;每个输入的内容及其粘贴的链接，并将其放入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

更改此行对我有用：

    var aaa = $("#additionalImgs input")[i].value;

Answer 2

您需要区分您生成的输入字段。

Try this fiddle

下面复制代码以供将来参考。请注意，生成的输入字段具有名为“field_＃”的唯一ID。当您想要检索值时，您还需要获取具有唯一ID的字段的值。

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#field_" + i).val();
                text += "<img src='" + aaa + "' width='" + imgHeight + "' height='" + imgWidth + "' name='" + y+++"' />";
            }
            $('#output').text(text);

        });

        $("#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 id='field_" + i + "' type='text' name='" + x+++"'><br />")
            };
        });
    });
</script>

如何向多个<img/>标记插入不同的链接

2 个答案: