如何将多个图像附加到span元素

时间:2013-03-02 21:00:09

标签: javascript jquery html

当我从数据库中读取数字时,我想动态地在span元素中插入多个图像。

代码:

$.ajax({
        type: "POST",
        url: "all_data.php",
        dataType: 'json',
        cache: false,
        success: function(response) {
            for (var i = 0, len = response.data.length; i < len; i++) {
            $('.item_holder').append('<span class="rating_images">'+response.data[i].number+'</span>');
        }
        }
    });

我需要检查变量response.data[i].number中的数字,然后插入 <img class="rating_img" src="../images/star.png" alt="rating"/> x次,具体取决于该数字

我知道如何检查该值,但我不知道如何在此内联文本中多次插入

2 个答案:

答案 0 :(得分:0)

我不确定我是否正确理解了你的问题,但也许是这样的? :

for (var i = 0; i < response.data.length; i++) {
    var number = response.data[i].number;
    var images = "";

    for(var j = 0; j < number; j++)
        images += '<img class="rating_img" src="../images/star.png" alt="rating"/>';

    $('.item_holder').append('<span class="rating_images">'+ images +'</span>');
}

答案 1 :(得分:0)

试试这个:

$.ajax({
    type: "POST",
    url: "all_data.php",
    dataType: 'json',
    cache: false,
    success: function(response) {
        var star_html = '<img class="rating_img" src="../images/star.png" alt="rating"/>';
        var make_stars = function(rating){
            var tpl = '';
            for(i=0; i<rating; i++){
                tpl += star_html;
            }
            return tpl;
        };

        $.each(response.data, function(){
            $('.item_holder').append('<span class="rating_images">'+make_stars(response.data[i].number)+'</span>');                
        });            
    }
});