如何插入多個不同的鏈接<img>標籤

我想出了一段代碼，允許用戶在頁面上創建自己的圖片庫。我希望用戶能夠放置自己的鏈接，並且我希望這些鏈接顯示在他們創建的每個img標籤的textarea中，以便他們可以複製整個代碼並粘貼，例如在他們的頁面上。然而，我想不出一種方法來「抓住」每個輸入的內容，並將它們粘貼的鏈接放在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>

來源

2013-05-10 user2369220

您需要區分你產生輸入字段。

Try this fiddle

的代碼被複制下面以供將來參考。請注意，生成的輸入字段具有一個名爲「field_＃」的唯一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>

來源

2013-05-10 13:20:32

THX了很多。我試圖給輸入字段和圖像標籤添加相同的屬性（「名稱」），但是這種方法要好得多。 – user2369220 2013-05-10 13:26:12

當您發佈數據時，name屬性是相關的。例如，如果您使用php並且想要檢索字段的值，則需要通過輸入的名稱來獲取它。 – 2013-05-10 13:28:39

改變這一行工作對我來說：

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

來源

2013-05-10 13:28:48 Igor

如何插入多個不同的鏈接<img>標籤

回答

相關問題