Почему javascript для идентификатора: overlay2 не отображается правильно?

Question

У меня есть два наложения, которые отображаются при нажатии кнопки. Когда у меня есть одна кнопка, функция работает правильно. Но когда я копирую и вставляю; и измените обмен сообщениями на втором оверлее, оба отобразят одно и то же сообщение. Я попытался изменить имена тегов ID, и это не работает. Может кто-нибудь объяснить, почему?

Answer 1

Вот способ сделать это. Я не использовал ваш HTML повторно, так как он просто загромождает этот пример вещами, которые здесь не важны.

В приведенном ниже примере я создал одно наложение и всплывающее окно. Он будет использоваться всеми предметами. Я старался комментировать код как можно больше и сделать его как можно более простым, но не стесняйтесь спрашивать, если что-то не понятно.

Кстати, вот несколько советов:

• Подумайте DRY (Не повторяйте себя) . Если вы поймаете себя на том, что копируете / вставляете код, спросите себя, как вы можете выполнить эту работу один раз, и заставить ее работать для нескольких одинаковых вещей. Это подразумевает: не используйте идентификаторы с 1, 2, 3 в них. Вместо этого, поскольку элементы имеют одинаковое поведение, используйте класс. Вот и вся их цель. Идентификаторы уникальны, классы являются общими. Не переписывайте целые функции, когда в них изменяется что-то одно. Это поможет вам позже, когда вы захотите изменить эту функцию. Вам нужно будет сделать это только один раз. Какое удовольствие!

• Не смешивайте HTML / JS / CSS. В своем коде вы подключали прослушиватели событий в HTML с onclick="...". Опять ты повторяешься. Если вы хотите что-то изменить, вам придется делать это везде. То же самое для стилей, которые используются несколькими элементами. Используйте классы и стилизуйте эти классы в отдельных CSS.

// Get all items on the page, the overlay so on
var items        = document.querySelectorAll('.item'),
    overlay      = document.getElementById('overlay'),
    closeBtn     = document.getElementById('popup-close-btn'),
    popupContent = document.getElementById('popup-content');

// Setup each of them
for (var i = 0; i < items.length; i++) {
  setupItem(items[i]); // Using a function here will make it easier (scope of `i`)
}

// Allow closing the popup
overlay.addEventListener('click', closePopup);

function setupItem(item) {
  // Get the button inside this item
  var btn = item.querySelector('.show-info-btn');
  // And the info associated to it
  var content = item.querySelector('.info').innerHTML;
  // Set up a click event listener
  btn.addEventListener('click', function() { openPopup(content); });
}

function openPopup(content) {
  // Set the popup content
  popupContent.innerHTML = content;
  // Show the overlay
  overlay.classList.add('open');
}

function closePopup(e) {
  // If we clicked on the overlay or close button (not on the popup itself)
  if (e.target === closeBtn || e.target === overlay) {
    // Hide the overlay
    overlay.classList.remove('open');
  }
}

/* Non-important CSS was minified to avoid cluttering the example */                                           body{font-family:Arial,Helvetica,sans-serif}.item{float:left;border:1px solid #ddd;text-align:center;padding:.5em}.item img{width:110px;height:100px;display:block;margin: 0 auto}h3{margin: 0.2em}.item .info{display:none}#overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.7);cursor:pointer;display:none}#overlay.open{display:block}#popup{width:400px;max-width:90%;margin:1em auto;background:#fff;padding:.8em;position:relative;padding-top:20px;cursor:default}#popup-close-btn{position:absolute;right:0;top:0;width:32px;height:32px;opacity:.5;cursor:pointer}#popup-close-btn:hover{opacity:1}#popup-close-btn:before,#popup-close-btn:after{position:absolute;left:15px;top:6px;content:' ';height:20px;width:2px;background-color:#333}#popup-close-btn:before{transform:rotate(45deg)}#popup-close-btn:after{transform:rotate(-45deg)}

.item .info {
  display: none; /* Hide the info inside the item element */
}

#overlay {
  /* ... */
  display: none;
}
#overlay.open {
  display: block; /* Only show the popup when .open */
}

<div class="item">
  <img src="https://s3.amazonaws.com/cdn.shopmedvet.com/images/large/COFLEX-VET4.jpg">
  <h3>Product A</h3>
  <button class="show-info-btn">Product Information</button>
  <div class="info">Some info about product A!</div>
</div>
<div class="item">
  <img src="https://s3.amazonaws.com/cdn.shopmedvet.com/images/large/COFLEX-VET4.jpg">
  <h3>Product B</h3>
  <button class="show-info-btn">Product Information</button>
  <div class="info">Some info about product B!</div>
</div>

<div id="overlay" title="Close">
  <div id="popup" title="">
    <div id="popup-close-btn" title="Close"></div>
    <div id="popup-content">lorem</div>
   </div>
</div>