Question

我正在使用http://vnjs.net/www/project/freewall/

中的freewall.js

图像是动态的。所以html会有：

<div class="brick">
  <img src="" width="100%">
</div>

JS

$(".free-wall .brick img").each(function(index, item) {
  item.src =  "images/" + (++index) + ".jpg";
});

我想做的事情是在自由墙上添加一些图像。

var temp = '<div class="brick"><img src="" width="100%"></div>';
$(".add-more").click(function() {
  for (var i = 0; i < 4; ++i) {
    wall.prepend(temp);
  }
  wall.fitWidth();
});

单击添加更多按钮时，将添加4个图像。问题是如何以相同的方式追加图像路径？

帮助表示赞赏！

Answer 1

试试这个，

$(".add-more").click(function() {
    for (var i = 0; i < 4; ++i) {
       src="images/"+(i+1)+".jpg";
       wall.prepend('<div class="brick"><img src="'+src+'" width="100%"></div>');
    }
    wall.fitWidth();
});

Answer 2

尝试

var temp = '<div class="brick"><img src="" width="100%"></div>';
$(".add-more").click(function () {
    var start = $(".free-wall .brick img").length + 1;
    for (var i = 0; i < 4; ++i) {
        $(temp).prependTo(wall).find('img').attr('src', "images/" + (start + i) + ".jpg")
        //or wall.prepend('<div class="brick"><img src="images/' + (start + i) + '.jpg" width="100%"></div>');
    }
    wall.fitWidth();
});

更新

$(".add-more").click(function () {
    var start = $("#freewall .brick img").length + 1,
        $imgs = $(),
        $img, loadcounter = 0;
    for (var i = 0; i < 4; ++i) {
        $img = $(temp).appendTo('.free-wall').find('img').attr('src', 'http://placehold.it/64&text=' + (start + i) + '.jpg').hide();
        $imgs = $imgs.add($img);
    }
    $imgs.on('load error', function () {
        loadcounter++;
        if (loadcounter == 4) {
            $imgs.show();
            wall.fitWidth();
        }
    }).filter(function(){
        return this.complete
    }).trigger('load')
});

演示：Fiddle

如何以与item.src相同的方式获取图像路径？

2 个答案: