Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Цикл вставки картинки (https://javascript.ru/forum/dom-window/79700-cikl-vstavki-kartinki.html)

misha.korolcov 11.03.2020 18:04

Цикл вставки картинки
 
доброе время суток есть html в ней есть 10 картинок
которые вставляются в блок в 80 местах
писать каждую картинку 80
<img src="img/test.png" alt="">

не очень правильно подскажите подскажите как правильнее сделать не знаю может как-то циклом

рони 11.03.2020 18:42

misha.korolcov,
информации недостаточно.

misha.korolcov 11.03.2020 18:54

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>

FreeStyler 11.03.2020 19:12

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>

voraa 11.03.2020 19:13

А на чем ты хочешь сэкономить?
Не писать src='...' ?
Не писать все эти дивы?

voraa 11.03.2020 19:43

Если по простому, то как то так можно
// для каждой из картинок 'имя' :'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, время: 08:36.