輸出HTML的代碼，如jQuery的

文字我有這樣的代碼：輸出HTML的代碼，如jQuery的

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代碼作爲純文本到文本區域（我喜歡的人能夠複製生成的代碼）。我希望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>

來源

2013-05-10 user2369220

那是因爲你overwitre textarea的內容與各自的.text（）調用，所以你得到的只是最後的圖像的HTML：如下更改您的循環體。 – 2013-05-10 08:54:17

我認爲你應該把答案標記爲正確，然後再問一個新問題。 – 2013-05-10 12:23:27

.text()覆蓋元素中的當前文本。你可以使用.append()或追加文本到一個變量和應用變量與.text()後的for循環：

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

來源

2013-05-10 08:51:02 Andy

-1

你可以得到IMG標記的「外部HTML」，並把它放在這樣一個文本框：

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

這是基於BOX9的在回答：在JS小提琴jQuery: outer html()

觀看演示：http://jsfiddle.net/VUbfh/1/

來源

2013-05-10 08:49:40

你忘了文本追加，在它設置文本每一次迭代，它沒有追加。

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

來源

2013-05-10 08:53:32 Sridhar

輸出HTML的代碼，如jQuery的

回答

相關問題