Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 11.03.2020, 18:04
Аспирант
Отправить личное сообщение для misha.korolcov Посмотреть профиль Найти все сообщения от misha.korolcov
 
Регистрация: 05.09.2019
Сообщений: 84

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

не очень правильно подскажите подскажите как правильнее сделать не знаю может как-то циклом
Ответить с цитированием
  #2 (permalink)  
Старый 11.03.2020, 18:42
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,071

misha.korolcov,
информации недостаточно.
Ответить с цитированием
  #3 (permalink)  
Старый 11.03.2020, 18:54
Аспирант
Отправить личное сообщение для misha.korolcov Посмотреть профиль Найти все сообщения от misha.korolcov
 
Регистрация: 05.09.2019
Сообщений: 84

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>
Ответить с цитированием
  #4 (permalink)  
Старый 11.03.2020, 19:12
Аватар для FreeStyler
Аспирант
Отправить личное сообщение для FreeStyler Посмотреть профиль Найти все сообщения от FreeStyler
 
Регистрация: 13.09.2009
Сообщений: 52

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>
Ответить с цитированием
  #5 (permalink)  
Старый 11.03.2020, 19:13
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,706

А на чем ты хочешь сэкономить?
Не писать src='...' ?
Не писать все эти дивы?
Ответить с цитированием
  #6 (permalink)  
Старый 11.03.2020, 19:43
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,706

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Плавное увеличение / уменьшение картинки. Бесконечный цикл. LLIypuk jQuery 1 11.04.2017 10:31
Очистка памяти, отмена загрузки картинки, отмена события. zhurchik Общие вопросы Javascript 16 23.10.2014 13:48
Как подчинить себе цикл wreder jQuery 17 20.11.2013 22:17
Цикл завешивает страницу, помогите Romingood jQuery 5 19.10.2013 14:30
Как изменить размер картинки? Mihail Общие вопросы Javascript 1 25.10.2009 13:42