Цикл вставки картинки
доброе время суток есть html в ней есть 10 картинок
которые вставляются в блок в 80 местах писать каждую картинку 80 <img src="img/test.png" alt=""> не очень правильно подскажите подскажите как правильнее сделать не знаю может как-то циклом |
misha.korolcov,
информации недостаточно. |
https://www.etorox.com/exchange/all-pairs/ вот копия
<div class="row"> <div class="col-12 col-md-3 mt-3 tabs-three-block"> <img src="img/asset_pairs/Exchange/image_l.png" class="" alt="list"> <img src="img/asset_pairs/Exchange/image_er.png" class="" alt="usa"> <p> LTC/EURX </p> </div> <div class="col-12 col-md-3 mt-3 offset-md-1 tabs-three-block"> <img src="img/asset_pairs/Exchange/image_x.png" class="" alt="list"> <img src="img/asset_pairs/Exchange/image_60.png" class="" alt="usa"> <p> XRP/USDEX </p> </div> <div class="col-12 col-md-3 mt-3 offset-md-1 tabs-three-block"> <img src="img/asset_pairs/Exchange/image_b.png" class="" alt="list"> <img src="img/asset_pairs/Exchange/image_60.png" class="" alt="usa"> <p> BCH/USDEX </p> </div> </div> <div class="row"> <div class="col-12 col-md-3 mt-3 tabs-three-block"> <img src="img/asset_pairs/Exchange/image_l.png" class="" alt="list"> <img src="img/asset_pairs/Exchange/image_60.png" class="" alt="usa"> <p> LTC/EURX </p> </div> <div class="col-12 col-md-3 mt-3 offset-md-1 tabs-three-block"> <img src="img/asset_pairs/Exchange/image_74.png" class="" alt="list"> <img src="img/asset_pairs/Exchange/image_er.png" class="" alt="usa"> <p> XRP/USDEX </p> </div> <div class="col-12 col-md-3 mt-3 offset-md-1 tabs-three-block"> <img src="img/asset_pairs/Exchange/image_l.png" class="" alt="list"> <img src="img/asset_pairs/Exchange/image_en.png" class="" alt="usa"> <p> BCH/USDEX </p> </div> </div> |
misha.korolcov,
может <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script> for(var i = 0; i < 80; i++) $('body').append('<img src="img/test.png" alt="">'); </script> |
А на чем ты хочешь сэкономить?
Не писать src='...' ? Не писать все эти дивы? |
Если по простому, то как то так можно
// для каждой из картинок 'имя' :'src' const images = { 'LTC' : 'img/asset_pairs/Exchange/image_l.png', 'EURX' : 'img/asset_pairs/Exchange/image_er.png', ..... } // массив из строк по 3 колонки const pairs [ ['LTC/EURX', 'XRP/USDEX', 'BCH/USDEX'], .... ] const pag = '' for (const prow of pairs) { pag+='<div class="row">'; for (let i=0; i<3; i++) { if (!prow[i]) break; // если в последней строке не все колонки const [pn1, pn2] = prow[i].split('/'); pag+= i? '<div class="col-12 col-md-3 mt-3 offset-md-1 tabs-three-block">' : '<div class="col-12 col-md-3 mt-3 tabs-three-block">'; pag += `<img src="${images[pn1]" class="" alt="${pn1}"> <img src="${images[pn2]" class="" alt="${pn2}"> <p>${pn1}/${pn2} </p> </div>` } pag+='</div>' } // в pag имеем html строку со всеми картинками // потом ее вставляем куда надо elem.innerHTML = pag |
Часовой пояс GMT +3, время: 01:59. |