Question

我有<div>，我想在其中添加图片。图像数量会随机变化。

这是我想要做的事情

$(document).ready(function () {
    var img = document.getElementById("img");
    $('#button').click(function () {
        var randomnumber = Math.floor(Math.random() * 11) + 1;
        for (var i = 1; i < = randomnumber; i++) {
            $(this).append(img);
        }
    });
});

但它不起作用。请帮忙

这是我的代码JSFiddle

Answer 1

您可能应该像simon建议使用克隆，或者您可以创建新图像：

function getImage(){
    var img = new Image();
    img.src = "http://cdn.acidcow.com/pics/20110830/lolcats_ever_13.jpg"
    img.width = 200;
    return img;
}

var rand = Math.floor(Math.random() * 11) + 1,
    imgContainer = $("#imgContainer"),
    i;

$("#imgNo").text(rand);

for (i=0; i<rand; i++){
    imgContainer.append(getImage());
}

<强> fiddle

Answer 2

嗯，你没有定义任何新图像。我不确定你从哪里得到你的照片。如果您有不同的图像，则可以使用下一个循环。除此之外，this指向#button元素。不知道它是哪个项目，但如果它是一个输入按钮，那么它将无法工作。您必须使用div或article或section ...作为目标。

$(document).ready(function () {
    $('#button').click(function () {
        // random number
        var randomnumber = Math.floor(Math.random() * 11) + 1;
        // insert images
        for (var i = 1; i < = randomnumber; i++) {
            // create a new img - element
            var img = document.createElement('img');
            // give it an id
            img.attr("id","img_" + i);
            // source, link
            img.attr("src","your_URL_here");
            // put newly created image in the div with id yourDivIdHere
            $('#yourDivIdHere').append(img);
        }
    });
});

id必须是唯一的，这就是我为新创建的元素的id使用for循环的索引的原因。对多个HTML元素使用相同的id可能会导致问题。

#yourDivIdHere表示ID为yourDivIdHere的div，如

<div id="yourDivIdHere"></div>

当您重复使用该按钮时，如果您不想在单击按钮后仍然看到旧图像仍然存在，只需使用$('#yourDivIdHere').empty()方法清除内容。

Answer 3

您需要克隆图像：

$(this).append( $(img).clone() );

你的方式总是在div中随机放置相同的图像（只有一个实例！）。所以最后只有一张图片。

如果每次克隆它，那么你将有N个图像

Answer 4

您正在按ID获取元素，因此附加元素始终是id =“img”的相同元素。阅读jQuery find()以查找所有元素。

在div中添加随机数量的图像

4 个答案: