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);
});​

​