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

Question

[Genri_Rus]

Всем доброго вечера!

Собственно такой вопрос, как вывести объекты поочередно в определенном месте на сайте ?

Вот пример:

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

function nameItem(name) {
  this.template = $('<span>' + name + '</br>' + '</span>');
  $('div').append(this.template);
}

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

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

В данном варианте у меня выводится все целиком, а как с помощью переменной this это выводить поочередно, когда я кликаю на кнопку ?

Answer 1

[Stockholm Syndrome]

так?

Comments

[Genri_Rus]

Да, спасибо )

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

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

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

[Genri_Rus]

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

[Stockholm Syndrome]

Genri_Rus, куда добавить?

давайте пример на codepen с объяснениями что нужно сделать, будем разбираться

[Genri_Rus]

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>

[Stockholm Syndrome]

Genri_Rus, так?

[Genri_Rus]

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

[Stockholm Syndrome]

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

[Genri_Rus]

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

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

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

[Genri_Rus]

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

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

[Stockholm Syndrome]

Genri_Rus, как я понял, каждой кнопке соответствует свой объект, тогда индекс объекта в массиве items можно хранить в data-атрибуте кнопки

https://codepen.io/anon/pen/XLrJKp?editors=1010

[Genri_Rus]

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

[Stockholm Syndrome]

Genri_Rus, это лишено смысла, эти объекты все равно придётся хранить в массиве, через который проще индексировать

[Genri_Rus]

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

[Stockholm Syndrome]

Genri_Rus, придётся выкручиваться самыми извращёнными способами, data-атрибуты самый простой вариант здесь, чем они не подходят?

[Genri_Rus]

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

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

[Stockholm Syndrome]

Genri_Rus, так и делают, элемент связывают с какой-то сущностью через data-атрибуты

[Genri_Rus]

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

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

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

[Stockholm Syndrome]

Genri_Rus, можно, никто не запрещает

[Genri_Rus]

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

[Stockholm Syndrome]

Genri_Rus, arr[0].nameOneItem

[Genri_Rus]

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

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

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

[Stockholm Syndrome]

Genri_Rus, просто с объектом

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

удобнее чем с чем?

[Genri_Rus]

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

[Genri_Rus]

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

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

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

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

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

[Stockholm Syndrome]

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

здесь первой кнопке в структуре DOM соответствует первый объект и т.д.

[Genri_Rus]

Stockholm Syndrome, да я понял, что это правильный вариант

Вы скидывали такой вариант: https://codepen.io/Genri_Rus/pen/oRKMNL

А потом вы переделали на второй вариант, чтобы при клике появлялся только один элемент, но при нажатии на вторую кнопку выскакивала Name one, я вам еще писал, мол:

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

А третий (последний) вариант вот этот: https://codepen.io/anon/pen/OYKEwg

[Genri_Rus]

Stockholm Syndrome, так вы не сохранили второй вариант ?

Там был пример с currentIndex = 0;

[Stockholm Syndrome]

Genri_Rus, видимо не сохранил, я сохранял уже существующий пен

P.S. наш диалог уже слишком большой, дабы не засорять комментарии, пишите в личку вк https://vk.com/sasha_bakarov

Answer 2

[Алексей Юдов]

На самом деле используя ES6 можно ваш код сделать очень красивым. Так что ловите решение

Comments

[Genri_Rus]

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

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

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

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

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

[Алексей Юдов]

Genri_Rus, инпут нужен только что бы имя задать. Если хотите можете генерить имя, либо оно всегда будет по умолчанию «Default item”. Так что, да, с помощью цикла просто создайте сколько надо элементов и выводите их.

PS: не могу посмотреть ваш код, у меня чет codepen релодиться бесконечно, не хочу сейчас с этим разбираться. Могу посмотреть на фидле ваш код.

[Genri_Rus]

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

[Алексей Юдов]

Genri_Rus, вот решение. Это точно работает, а там уже куда хотите пихайте данные, хоть в span, хоть в div. Думаю это достаточно наглядное решение.

[Алексей Юдов]

Genri_Rus, я бы вам все же посоветовал изучить синтаксис ES6. Вы для себя много чего интересного откроете. И с классами как видите в ES6 работать приятнее(нагляднее)

[Genri_Rus]

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

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

[Алексей Юдов]

Genri_Rus, есть хороший цикл Array.forEach() или .map(). В моем ответе можно посмотреть как работает .map().

Да, стоит сделать ООП, так будет проще с данными работать. Не обязательно создавать класс, достаточно создать объект для хранения данных, а исходя из его данных выводить нужный html.

Из-за того что у вас все сплошником написано, то не совсем понятно где и что выводить.

[Genri_Rus]

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 объектов делать ООП ?

[Алексей Юдов]

Genri_Rus, ради о чтобы не создавать плохие привычки. Даже тесты не пишутся на коленке.

[Genri_Rus]

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

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

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

[Алексей Юдов]

Genri_Rus, задайте это в качестве нового вопроса. Я там на него отвечу.

[Genri_Rus]

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

[Genri_Rus]

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