Цикл вставки картинки
доброе время суток есть 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, время: 14:22. |