Как поочередно вывести элементы в цикле с new()?

Question

[Genri_Rus]

Доброго времени суток!

Когда я кликаю по кнопке, то у меня не получается поочередно вывести в цикле объекты new()

Мне нужно при первом клике выводить один элемент, а при втором клике - второй

Вот пример:

<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>

const icon = $('.icon-right');
const modal = $('.modal');

nameItem();

function nameItem() {
    $('.move').click(function() {
      let imgCat = $(this).parent().find('img').attr('src');
      
      let Item = function(name, img) {
         this.name = name;
         this.img = img;
      }
      
      let $this = $(this);
      
      let obj = {nameOne : 'Name one', nameTwo : 'Name two'};
      
      let arr = [
        {nameItem : new Item(obj.nameOne, imgCat)},
        {nameItem : new Item(obj.nameTwo, imgCat)}
      ];
      
      let modalCat = '';
      
      for (let i = 0, l = arr.length; i < l; i++) {
          modalCat += '<div class="item">'
          modalCat += '<img src="' + arr[i].nameItem.img + '">'
          modalCat += '<span>' + arr[i].nameItem.name + '</span>'
          modalCat += '</div>';
      }
      
      if ($('.move').is(this)) {
        if (!modal.children().is('.item')) modal.text('Каталог');
      } else {
          modal.removeClass('show-item').text('Здесь ничего нет');
      }
            
      $(modal).addClass('modal-open').append(modalCat);
  })
}

Более наглядно: https://codepen.io/Genri_Rus/pen/pXjepQ

Comments

[Wynell_ru]

И что тут не так? Что должно происходить, и что происходит?

[Genri_Rus]

Wynell_ru, с картинками все нормально, я их беру при клике с помощью this

А вот как применить this при клике к этим объектам ?

let obj = {nameOne : 'Name one', nameTwo : 'Name two'};

Мне нужен эффект от this, т.е. при клике у меня выводятся все названия, а нужно только одно с одной картинкой

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

[Wynell_ru]

Genri_Rus, все равно, не очень понял.
Сейчас, если я нажимаю на какую-либо из кнопок, то выезжает каталог:, nameone, nametwo
При последующих нажатиях к существующим nameone и nametwo добавляются ещё nameone и nametwo

[Genri_Rus]

Wynell_ru, да

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

А при втором клике: вторая картинка и nametwo показывалась

[Wynell_ru]

Genri_Rus,
Чтобы при клике на первую кнопку (сверху) выводило
каталог:
nameone с картинкой как у первой кнопки
И
nametwo с картинкой как у второй кнопки?

[Wynell_ru]

Genri_Rus, при клике на какую кнопку? Я там 2 увидел

[Genri_Rus]

Wynell_ru,

Чтобы при клике на первую кнопку (сверху) выводило
каталог:
nameone с картинкой как у первой кнопки
И
nametwo с картинкой как у второй кнопки?

да все верно!

Answer 1

[Wynell_ru]

У вас в цикле же выводится сначала NameOne потом NameTwo и без всяких условий...

Сделал более правильное получение img.src
и убрал цикл, чтобы не выводилось все сразу.
Ведь при клике на одну кнопку нужен лишь один вывод, не так ли?

Также, добавил более удобное присвоение названий (типа NameOne, NameTwo)
- теперь не нужно лезть в скрипт,
достаточно у того же изображения указать data-name=[название].
https://codepen.io/ioann-petruhinn/pen/EBPjbg

И, версия без data-name, только с переделанным циклом.
https://codepen.io/ioann-petruhinn/pen/JQGYYp

Comments

[Genri_Rus]

При клике на первую кнопку, в модальном окне должно быть: nameone с картинкой как у первой кнопки
При клике на вторую кнопку в модальном окне должно быть: nametwo с картинкой как у второй кнопки

В ваших примерах при клике на первую кнопку все сразу выводится, так и при крике на вторую

[Genri_Rus]

Возможно вы что-то не дописали ?

Просто мне нужен вывод по-одному элементу - название и картинка

Ну как аналог с this если использовать ...

[Wynell_ru]

Genri_Rus, понял, сейчас допишем

[Wynell_ru]

Genri_Rus, дописал, изменил ответ.
Проверяйте.
Удачи.

[Genri_Rus]

Wynell_ru, вот этот вариант просто суперский:

https://codepen.io/ioann-petruhinn/pen/JQGYYp

Все четко и без воды, спасибо !

[Genri_Rus]

Wynell_ru, доброго времени суток
Вот я сделал удаление элементов:
https://codepen.io/Genri_Rus/pen/pXjepQ
Но когда я все удалил, то мне нужна надпись: ''Здесь ничего нет'

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

[Wynell_ru]

https://codepen.io/ioann-petruhinn/pen/qzbgLj
Сделал двумя способами (один закоментировал)
Простите, больше тут помогать не буду, если что еще надо будет - прошу в вк/p3trukh1n

[Genri_Rus]

Wynell_ru, спасибо большое )
Все как обычно - круто !

[Genri_Rus]

Wynell_ru, мне кажется, что этот кусок кода вообще не нужен ?

if ($('.move').is(this)) {
        if (!modal.children().is('.item')) modal.text('Каталог');
      } else {
          modal.removeClass('show-item').text('Здесь ничего нет');
      }