javascript - jQuery を使用して画像ソースを動的に生成する

Question

ここで誰かが私を助けてくれたこのコードがあります。これは基本的に、選択オプションを div 要素に変換し、それらを横に画像とともに表示します。

 $('#property_types option').slice(1).each(
function(){
    var text = $(this).text(),
        outputTo = $('#output'),
        div = $('<div />').text(text),
        img = $('<img />', {'src' : text}).prependTo(div);
    div.appendTo(outputTo);
});

現在、出力は次のとおりです。

 <div><img src="Apartment" /> Apartment</div>
 <div><img src="Building" /> Building</div>
 <div><img src="Land" /> Land</div>
 <div><img src="Office" /> Office</div>

srcも動的に調整したい。

次のようにします。

 <div><img src="images/Apartment.png" /> Apartment</div>
 <div><img src="images/Building.png" /> Building</div>
 <div><img src="images/Land.png" /> Land</div>
 <div><img src="images/Office.png" /> Office</div>

Answer 1

src にテキストを追加する

$('#property_types option').slice(1).each(
function(){
    var text = $(this).text(),
        outputTo = $('#output'),
        div = $('<div />').text(text),
        img = $('<img />', {'src' : 'images/'+text+'.png'}).prependTo(div);
    div.appendTo(outputTo);
});

と

$('#property_types option').slice(1).each(
function(){
    var text = $(this).text(),
        outputTo = $('#output'),
        div = $('<div />').text(text),
        href = $('<a />', {'href' : '#', 'onclick' : 'go'+text+'();'}).prependTo(div),
        img = $('<img />', {'src' : 'images/'+text+'.png'}).prependTo(href);
    div.appendTo(outputTo);
});

Answer 2

これを試して：

 $('#property_types option').slice(1).each(function(){
      var text = $(this).text(),
          outputTo = $('#output'),
          div = $('<div />').text(text),
          img = $('<img />', {'src' : 'images/'+text+'.png'}).prependTo(div);
      div.appendTo(outputTo);
 });

Answer 3

これを試して

$(document).ready(function() {

    var source = 'http://upload.wikimedia.org/wikipedia/en/thumb/e/e9/Ruby_on_Rails.svg/150px-Ruby_on_Rails.svg.png'
    outputTo = $('#output');
    var div = $('<div />').text('sdfsdfdsf');
    var img = $('<img />').attr('src', source).prependTo(div);
    div.appendTo(outputTo);
});​

​