Как при клике выводить объекты поочередно и постоянно с помощью this?

Question

[Genri_Rus]

Всем доброго времени суток

Все никак не получается сделать такой алгоритм действий

Допустим у меня на странице есть картинки, но без названия под ними (пример как с постами)

И вот я хочу выводить эти самые картинки в модальном окне, но уже добавлять к ним тег span с названием и описанием данных картинок

Вот пример:

<div>
  <p class="img"><img src="https://picsum.photos/30">
  <button class="move">Переместить</button>
  </p>
</div>

<div>
  <p class="img"><img src="https://lorempixel.com/30/30/technics">
  <button class="move">Переместить</button>
  </p>
</div>

<div class="icon-right"><i class="fa fa-tags" aria-hidden="true"></i></div>

<div class="modal">Здесь ничего нет</div>

Вот пример кода: https://codepen.io/Genri_Rus/pen/Rmzvoa

Мне нужно при каждом клике выводить поочередно картинку и название объекта, который находится в span

Answer 1

[noeer]

Как вариант, можете использовать такую функцию

var i=0;
function customGetElemet(s){
	var e = $(s+':eq('+i+')');
	if(e.length > 0){
		i++;
		return e;
	}
	return false;
}

Для получения очередного элемента вызывайте функцию с нужным селектором.
Например, для изображений
var img = customGetElemet('img');

Comments

[Genri_Rus]

Спасибо за ответ!

Такой вопрос, если картинки я беру со страницы ?

let imgCat = $(this).parent().find('img').attr('src');

А вот мне нужно добавить к ним тег span с названиями (пример как с карточками товара)

Я пытался создать новые объекты:

let nameOneItem = new Item('Name one');
let nameTwoItem = new Item('Name two');

И как я могу в тег span поставить данные имена ?

Например я хотел вот так:

<div><img src="https://picsum.photos/30"><span>Name one</span></div>
<div><img src="https://lorempixel.com/30/30/technics"><span>Name two</span></div>

А также реализовать это через конструктор:

let Item = function(name) {
   this.name = name;
 }

И в цикле подставлять name

for (let i in name) {
         modalCat += '<div class="modal-item">'
         modalCat += '<img src="' + imgCat + '">'
         modalCat += '<span class="name-item">' + name[i] + '</span>'
         modalCat += '<span class="remove-item"><i class="fa fa-times" aria-hidden="true"></i></span>'
         modalCat += '</div>';
      }

Сложно ли это так реализовать ?

[Genri_Rus]

Вы не знаете как это можно примерно сделать ?

P.S. Был бы очень благодарен за ответ!

[noeer]

С изображениями все понятно. Вы их берете со страницы.
А где у вас хранятся названия, которые вы хотите выводить в модальном окне?

Как вариант, могу предложить записывать названия в атрибут alt или title, а потом получать их скриптом вместе с адресами изображений.

[Genri_Rus]

noeer, что-то типа такого: https://codepen.io/anon/pen/KLEOoB

А где у вас хранятся названия, которые вы хотите выводить в модальном окне?

let nameOneItem = new Item('Name one');
let nameTwoItem = new Item('Name two');

А разве так объекты нельзя в javascript создавать ?

Допустим помощью цикла Name one подставить в тег span, а потом Name two

<div><img src="https://picsum.photos/30"><span>Name one</span></div>
<div><img src="https://lorempixel.com/30/30/technics"><span>Name two</span></div>

[Genri_Rus]

noeer, или так никто не делает ?

[noeer]

Genri_Rus, в таком случае, как вы собираетесь привязывать названия к изображениям?

[Genri_Rus]

noeer, ну в тег span можно же подставлять данные объекты ?

let nameOneItem = new Item('Name one');
let nameTwoItem = new Item('Name two');

Может можно как-то на этом примере ?

https://jsfiddle.net/TCLoud/wj7cktgo/26/

[noeer]

Вы собираете скриптом со страницы все изображения подряд.
Не вижу связи "изображение - название".
Вы же хотите для каждой картинки сделать уникальную подпись?

[Genri_Rus]

noeer, да именно так

Названий на странице у меня нету, но разве нельзя в цикле for in подставлять эти подписи картинкам ?

let nameOneItem = new Item('Name one');
let nameTwoItem = new Item('Name two');

Допустим картинки и объекты (подписи) пушить (push) в массив, а потом через цикл с тегами img и span выводить в верстку ?

[noeer]

Об этом я и спрашиваю.
Если у вас есть массив с адресами и названиями изображений, можно работать с массивом.

Допустим картинки и объекты пушить (push) в массив,

Откуда пушить?
У вас заранее должно быть прописана связь между изображениями и их названиями.

[Genri_Rus]

noeer, а как это можно сделать ?

Пример как это можно более правильно реализовать ?

[noeer]

Пример как это можно более правильно реализовать ?

Примерно так

var images = new Array(
		{
			'url' : '/image-1.jpg',
			'title' : 'Title 1'
		},
		{
			'url' : '/image-2.jpg',
			'title' : 'Title 2'
		}
	);

var modalCat = '';
for (let i in images) {
	modalCat += '<div class="modal-item">'
	modalCat += '<img src="' + images[i]['url'] + '" alt="">'
	modalCat += '<span class="name-item">' + images[i]['title'] + '</span>'
	modalCat += '<span class="remove-item"><i class="fa fa-times" aria-hidden="true"></i></span>'
	modalCat += '</div>';
}

[Genri_Rus]

noeer, спасибо большое, а если у меня есть картинки на странице ?

Получается связать картинки с новыми объектами нельзя ?

Я имел ввиду про эти:

let nameOneItem = new Item('Name one');
let nameTwoItem = new Item('Name two');

Но только картинки брать со страницы:

<div>
  <p class="img"><img src="https://picsum.photos/30">
  <button class="move">Переместить</button>
  </p>
</div>

<div>
  <p class="img"><img src="https://lorempixel.com/30/30/technics">
  <button class="move">Переместить</button>
  </p>
</div>

let imgCat = $(this).parent().find('img').attr('src');

[noeer]

Варианта два.
1) Прописывайте названия в в атрибуте alt или title.
2) Можете массив с изображениями создавать непосредственно на странице, а не выносить в js файл.

[Genri_Rus]

noeer, ну если я добавляю изображения на страницу

<div>
  <p class="img"><img src="https://picsum.photos/30">
  <button class="move">Переместить</button>
  </p>
</div>

<div>
  <p class="img"><img src="https://lorempixel.com/30/30/technics">
  <button class="move">Переместить</button>
  </p>
</div>

То я в цикле никак не смогу добавить к ним подписи ?

let nameOneItem = new Item('Name one');
let nameTwoItem = new Item('Name two');

Именно: Name one для первой картинки, а для второй картинки - Name two

[noeer]

Ну так вам же придется править код в js файле при каждом добавлении новой картинки.
Это неправильный подход.

[Genri_Rus]

noeer, а как добавить новый объект в this.img = img; ?

let imgCat = $(this).parent().find('img').attr('src');
      
      let Item = function(name, img) {
         this.name = name;
         this.img = img;

         console.log(name);
      }
      
      let nameOneItem = new Item('Name one');
      let nameTwoItem = new Item('Name two');
      let imgItem = new Item(imgCat);

[Genri_Rus]

noeer, мне нужно что-то типа такого:

https://codepen.io/anon/pen/OYKEwg

Но только чтобы при клике добавлялся только один элемент, а при втором клике - второй, при 3 клике - снова первый и т.д. ?

[Genri_Rus]

noeer, а как в вашем примере выводить по-одному элементу ?

https://codepen.io/Genri_Rus/pen/BgoZKy