javascript - 通过从html中提取图像来创建图像数组

我有一张所有带有.pics类的图像表，并且我想使用Javascript从HTML表中提取实际图片并将它们放入数组中。

之后，我想从阵列中随机选择一个图像并更改其亮度级别。

我尝试这样做：

var allPics = [];

$(".pics").each (function (){ allPics.push (this); });

但没有骰子。

谢谢！

最佳答案

首先我们用var allPics = [];初始化数组

然后遍历我们的HTML并加载数组。

$('.pics .pic').each(function() {
    allPics.push(this);
});

然后根据数组的大小生成一个随机索引。

var index = parseInt(Math.random()*allPics.length);

然后喷出存储在数组中的图像，使用$(allPics[index]).prop('outerHTML')将jQuery对象转换为HTML字符串。

$('.random').append(
    $(allPics[index]).prop('outerHTML')
);

在CSS中使用filter: brightness(.5)调整图像的亮度，请确保至少使用-webkit-供应商前缀，因为目前许多主流浏览器均require。

有关工作示例，请参见my fiddle。