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 コードをプレーンテキストとしてテキストエリアに出力できるようにすることです (生成されたコードをコピーできるようにしてほしいです)。[画像の数] ボックスで指定した回数だけ img タグをテキスト領域に表示したいと考えています。上記のコードは、入力した「画像の数」に関係なく、コードをテキストとして 1 回だけ出力します。事前に

[編集] 素早い回答をありがとうございました 今、私は別のことで立ち往生しています。ユーザーが独自のリンクを設定できるようにして、それらのリンクを、作成された各イメージ タグ内のテキスト領域に表示したいと考えています。ただし、各入力の内容を「つかんで」タグに入れる方法は考えられません。常に最初の入力の内容が表示されます ：） ここ'

 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 に答える