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

Stockholm Syndrome, а могли бы скинуть тот второй пример, где я писал:

И где-то с логикой что ли нарушения, если при загрузке сразу же нажимаю на 2 кнопку, то мне показывается имя name one, а как сделать, чтобы показывалось name two ?
Заранее спасибо !

Именно тот пример, где без data атрибутов и логика нарушена

Сейчас по этой ссылке: https://codepen.io/anon/pen/OYKEwg пример с data-атрибутами

Заранее спасибо, пока что хотел посравнивать через консоль

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

Stockholm Syndrome, ну я имел ввиду что в массиве же можно добавлять, редактировать и удалять данные

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

Stockholm Syndrome, спасибо, буду тренироваться )

А вот на практике чаще всего объект в массив вкладывают или просто работают с объектом ?

Я так понял, что с массивом удобнее работать ?

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

Stockholm Syndrome, а как потом к ним обращаться ?

const Item = function(name, img) {
  this.name = name;
  this.img = img;
}

let arr = [
     {nameOneItem : new Item('Name one', imgCat)},
     {nameTwoItem : new Item('Name two', imgCat)}
];

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

Stockholm Syndrome, спасибо большое за объяснения !

А вот еще такой вопрос, можно ли внутри объекта объявлять новый объект ?

let arr = [
     {nameOneItem : new Item('Name one', imgCat)},
     {nameTwoItem : new Item('Name two', imgCat)}
];

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

Stockholm Syndrome, спасибо за ответ, дело в том, что мне хотелось бы узнать как это на практике делают

Потому что новые объекты наверно через полноценное ООП прогоняют ?

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

Stockholm Syndrome, а без data-атрибутов в данном случае не обойтись ?

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

Stockholm Syndrome, а нельзя сделать типа так ?

const Item = function(id, name, img) {
  this.id = id;
  this.name = name;
  this.img = img;
}

const items = [
    new Item(0, 'Name one', src),
    new Item(1, 'Name two', src)
  ];

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

Stockholm Syndrome, сложно ли реализовать такое поведение ?

P.S. Допустим всегда при клике по второй кнопке - выводить name two

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

Stockholm Syndrome, круто, думал сложнее будет )

А через чикл for прогнать такой вариант можно же ?

И где-то с логикой что ли нарушения, если при загрузке сразу же нажимаю на 2 кнопку, то мне показывается имя name one, а как сделать, чтобы показывалось name two ?
Заранее спасибо !

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

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

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

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

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

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

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

Stockholm Syndrome, вот пример: https://codepen.io/Genri_Rus/pen/Rmzvoa

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

Чтобы допустим было так ?

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

а как добавить новый объект в 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);

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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