@Genri_Rus

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

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

Когда я кликаю по кнопке, то у меня не получается поочередно вывести в цикле объекты 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
  • Вопрос задан
  • 167 просмотров
Решения вопроса 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
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы