создать массив изображений, потянув их из 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') 
); 

Яркость изображения регулируется в CSS с filter: brightness(.5), обязательно использовать, как минимум, префикс -webkit- поставщика, как много основных браузеров на данный момент require это на данный момент.

Для рабочего примера см. my fiddle.