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

Question

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

之后，我想从数组中随机选择一个图像并改变其亮度级别。

我试过这样做：

var allPics = [];

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

但没有骰子。

谢谢！

Answer 1

首先，我们使用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')
);

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

请参阅my fiddle了解工作示例。