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

TCloud, не поможете ?

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

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

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

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>

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

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

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

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

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

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

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>';
      }

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

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

TCloud, создал новую тему: Вопрос
P.S. Я поменял пример, может так будет нагляднее ...

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

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

А вот если мне нужно поочередно и постоянно выводить объекты при клике ?

Как это можно сделать, через return или как можно ?

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

TCloud, мне нужно выводить в модальное окно вот в этом месте:

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>';
      }

modalCat += '<span class="name-item">' + name[i] + '</span>'

Под name[i] поочередно подставлять: Name one и Name two

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

Просто ради 2 объектов делать ООП ?

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

TCloud, вот: https://jsfiddle.net/Genri_Rus/kf029zqh/
Как в цикле вывести ?

Или нужно создавать ООП ?

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

TCloud, вот:

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

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

function nameItem(name) {
    $('.move').click(function() {
      let imgCat = $(this).parent().find('img').attr('src');

      let modalCat = '';

      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>';
      }

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

      modal.addClass('modal-open').append(modalCat);

      setTimeout(function() {
        $('.modal-item').addClass('show-item');
      }, 80);
  })
}

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

Мне нужно в теге span поочередно в цикле вывести данные объекты

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

modalCat += '<span class="name-item">' + name[i] + '</span>'

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

Спасибо большое
А если мне не нужен инпут ?

Допустим у меня есть данные объекты

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

И можно ли с помощью цилка поочередно выводить данные объекты при клике на кнопку?

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

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

Да, спасибо )

А как в этом примере вывести span, если у меня его нет на странице ?

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

И можно вообще вывести такой объект циклом ?

Как при клике добавить произвольные имена тегу span?

toxic-toster, а это вообще сложно сделать ?

Как при клике добавить произвольные имена тегу span?

toxic-toster, по одной из кнопок переместить

Как при клике добавить произвольные имена тегу span?

toxic-toster, вы меня неправильно поняли или не сможете показать пример ? )

Как при клике добавить произвольные имена тегу span?

toxic-toster, ну мне нужно при клике, чтобы в модальном окне появлялся только один элемент

Т.е. не все сразу, а только один

Может вы знаете как это можно сделать на более наглядном примере ?

Мне получается при первом клике на кнопку нужно показать в модальном окне в теге span 'Name one'
А при втором клике на кнопку "переместить" - название в теге span 'Name two'

Как при клике добавить произвольные имена тегу span?

toxic-toster, да )

Но чтобы только в цикле было:

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

    let modalCat = '';
  
    for (let i in obj) {
       modalCat += '<div class="modal-item">'
       modalCat += '<img src="' + imgCat + '">'
       modalCat += '<span class="name-item">Тут название из объекта new Item</span>'
       modalCat += '<span class="remove-item"><i class="fa fa-times" aria-hidden="true"></i></span>'
       modalCat += '</div>';
    }

Дело в том, что у меня на странице уже есть картинки:

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

А вот тегов span c названиями на странице нет

И я хотел, чтобы в цикле поочередно (ну как служебная переменная this) выводились в модальное окно все картинки и сам span при клике по кнопке "Переместить"

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

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

Но не знаю, как их подставить в самом цикле в тег span

Как в массиве с разными ключами вывести данные на страницу?

Тимур Турсунбаев, может не знаете как это можно грамотно сделать: Как при клике добавить произвольные имена тегу span?

Как в массиве с разными ключами вывести данные на страницу?

Тимур Турсунбаев, нет )

Я вас понял, спасибо что ответили !

Как в массиве с разными ключами вывести данные на страницу?

Тимур Турсунбаев, по ключу можно обращаться к объекту { }, но не к массиву [ ]

То, что javascript это сплошной объект я понял, когда хотел к массиву добавить произвольные ключи )