2

Как сделать popup с разной информацией для каждого блока?

Есть 2 блока(будет больше), хочу осуществить так, чтобы на каждый блок открывалась разная информация в popup окне.

1)
Имя: Олег

Возраст: 25

2) 
Имя: Лёша

Возраст 26

Вроде как, через data атрибуты это делается, если я правильно понял, но что-то не получается вообще.

Если брать data-name="oleg", и в JS, как-то забирать оттуда инфу, то далее не получилось осуществить POPUP, чтобы открылся именно блок с информацией Олега.

Не получается написать код на JS, чтобы при нажатии на 1 блок открывалась информация первого блока, то есть Олега.

Информация заполняться будет вёрсткой в коде.

Если это делается с помощью атрибутов data, то скажите просто да, я пойду искать инфу, а если хотите ответить, то только буду благодарен Вам.

1 ответ 1

3

Чтобы не возиться с дата-атрибутами, можно изначально хранить всю информацию в объекте, а пустые карточки заполнять оттуда. Соответственно и при клике доставать информацию из нужного объекта — индекс кликнутого элемента будет соответствовать индексу в массиве.

Решение ниже наверняка вам не подойдет 1:1 - всё равно надо писать своё с нуля) Но вдруг захочется что-то перенять:

let USER_DATA = [
  {name: "Олег", sur: "Иванов", age: 30, avatar: "https://gyazo.com/f850be7e9fc91aa2c8cb844603ea1e10.png",},
  {name: "Lindsey", sur: "Stirling", age: 25, avatar: "https://i.gyazo.com/fe48322c44d1c214ee8d9ba49876a0da.png",},
  {name: "Maki", sur: "Harukawa", age: 20, avatar: "https://gyazo.com/c708f879e56f725318fafca74b9cbe7f.png",},
];

/*******************/
let data = USER_DATA; // Для удобного локального использования.
let cards = ArrUserCardComponents();
let limit = cards.length; 
/* подразумевается, что массив будет сильно больше, чем количество юзеров на странице */
let shownUserIndexes = []; /* Будет хранить индексы (или id) показанных юзеров */

loadUserData(0, 3);
handleUserCardFunctional();

function loadUserData(start, end, array){
  array = array || USER_DATA; // это чтобы можно было вызывать не указывая массив.
  
  for( let i = start; i < end; i++ ){
    let index = i % limit; 
    /* start может быть 48 (48-й юзер), а limit = 3, всё равно возьмется индекс 0 для карточки */
    
    cards[index].avatar.src = array[i].avatar;
    cards[index].name.textContent = array[i].name;
    cards[index].age.textContent = array[i].age;
    
    shownUserIndexes[index] = i;
  }
}

function ArrUserCardComponents(){
  let cards = document.querySelectorAll('.user-card');
  let arr = [];
  
  for( let i = 0; i < cards.length; i++ ){
    let card = cards[i];
    arr.push({
      avatar: card.querySelector('.avatar'),
      name: card.querySelector('.name'),
      age: card.querySelector('.age'),
    });
  }
  
  return arr; // Google. → JS array reduce
}

function handleUserCardFunctional(){
  let cards = document.querySelectorAll('.user-card');
  
  popupOnClick();
  // другие();
  // связанные();
  // функции();
  
  function popupOnClick(){
    let idx = shownUserIndexes;
  
    for( let i = 0; i < cards.length; i++ ){
      cards[i].addEventListener('click', function(){
        let index = idx[i];
        alert(
         `Имя: ${ data[index].name }
          Фамилия: ${ data[index].sur }
          Возраст: ${ data[index].age }`
        ); /* Заполнить-показать любую другую форму */
      });
    }
  }
}
.users {
  display: inline-flex;
  flex-wrap: wrap;
  padding: 5px;
}

.user-card {
  border: 2px solid orange;
  margin: 4px;
  padding: 6px;
  background-color: #fff1ba;
  cursor: pointer;
}

.avatar {
  width: 100px;
  height: 100px;
  border: 1px solid #123;
}

.user-card:hover {
  background-color: #ffe2aa;
}
<div class="users">

  <div class="user-card">
    <div><img class="avatar"></div>
    <span class="name"></span> ( <span class="age"></span> )
  </div>

  <div class="user-card">
    <div><img class="avatar"></div>
    <span class="name"></span> ( <span class="age"></span> )
  </div>

  <div class="user-card">
    <div><img class="avatar"></div>
    <span class="name"></span> ( <span class="age"></span> )
  </div>

</div>

А так - да, при клике можно выводить информацию и из атрибута:

let bubu = document.querySelectorAll('.bubu');

for( let i = 0; i < bubu.length; i++ ){
  bubu[i].addEventListener('click', function(){
    console.clear();
    console.log( this.dataset.bubu + ", " + this.dataset.moo );
  });
}
.bubu {
  display: inline-block;
  width: 100px;
  height: 100px;
  border: 2px solid orange;
  margin: 5px;
  cursor: pointer;
}
.bubu::after {content: "Клик!";}
<div class="bubu" data-bubu="bubu-0" data-moo="moo-0"></div>
<div class="bubu" data-bubu="bubu-1" data-moo="moo-1"></div>
<div class="bubu" data-bubu="bubu-2" data-moo="moo-2"></div>

2
  • Понравилось, - Но вдруг захочется что-то перенять: Значит не теряешь веры, что остались ещё люди, которые хотят учиться самостоятельно переваривать инфу, а не только получать готовый ответ :) 19 ноя 2019 в 16:22
  • Спасибо Вам большое за показ правильного пути :) Я стараюсь и учусь, сейчас буду писать всё с нуля по вашему примеру)
    – hitFM
    20 ноя 2019 в 13:21

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.