1

Ребят, есть галерея миниатюрами при клике на миниатюру появляется блок с описанием миниатюры, и сверху находится кнопка(Х)-для того чтобы закрыть этот блок. Проблема в том , что он работает только с самой первой картинкой. Как сделать чтобы он работал со всеми картинками. КОД-зайдите на второй там Collection чтобы увидеть галерею.

CSS-сама кнопка

#closeButton{
    width:16px;
    height: 16px;
    background-image: url("http://cbmedia3.contobox.com/cbox_themes_v3/marks_fall_footwear_q4_2017/images/demoCloseBtn.png?ac=1506976312");
    display: block;
    position: absolute;
    z-index: 4;
    cursor: pointer;
    right: 14px;
}

HTML - код нескольких

<div class="col-pr col-pr-1" data-pos="1">
  <div class='modal-for-photo' id="nameToClose">
    <div class='modal-background'></div>
      <div class='modal-body'>
       <span id="closeButton"></span>
        <p>It's Me! Mario!</p>
        </div>
         </div>
            </div>

<div class="col-pr col-pr-2" data-pos="2">
   <div class='modal-for-photo' id="nameToClose">
    <div class='modal-background'></div>
      <div class='modal-body'>
        <span id="closeButton"></span>
          <p>It's Me! Mario! #2</p>
          </div>
  </div>

Js

document.getElementById('closeButton').addEventListener('click',function () {
    document.getElementById('nameToClose').style.display = 'none';
});
1

2 ответа 2

2

Аттрибут id желательно делать уникальным. В Вашем случае именно поэтому не отработал js, так как getElementById() работает с первым найденным элементом. Для решения можно попробовать следующую реализацию (я заменяю id на class).

CSS:

.closeButton{
    width:16px;
    height: 16px;
    background-image: url("http://cbmedia3.contobox.com/cbox_themes_v3/marks_fall_footwear_q4_2017/images/demoCloseBtn.png?ac=1506976312");
    display: block;
    position: absolute;
    z-index: 4;
    cursor: pointer;
    right: 14px;
}

HTML:

<div class="col-pr col-pr-1" data-pos="1">
  <div class='modal-for-photo nameToClose'>
    <div class='modal-background'></div>
      <div class='modal-body'>
       <span class="closeButton"></span>
        <p>It's Me! Mario!</p>
        </div>
         </div>
            </div>

<div class="col-pr col-pr-2" data-pos="2">
   <div class='modal-for-photo nameToClose'>
    <div class='modal-background'></div>
      <div class='modal-body'>
        <span class="closeButton"></span>
          <p>It's Me! Mario! #2</p>
          </div>
  </div>

JS:

var buttons = document.getElementsByClassName('closeButton');

[].forEach.call(buttons,function(el){
    el.addEventListener('click', function () {
        el.closest('.nameToClose').style.display = 'none';
    });
});
10
  • я пробовал так сделать , не вышло, даже на второй таб не заходит при этой реализации
    – Anton
    31 окт 2017 в 10:13
  • выводит вот такую ошибку ==> Uncaught TypeError: document.getElementsByClassName(...).addEventListener is not a function at index.html?_ijt=18nl3eoe9htjsfiuqviogrqjfo:1242 (anonymous) @ index.html?_ijt=18nl3eoe9htjsfiuqviogrqjfo:1242
    – Anton
    31 окт 2017 в 10:13
  • Document.getElementsByClassName() - Возвращает массивоподобный (итерируемый) объект всех дочерних элементов, соответствуюих всем из указанных имен классов. Обратить внимание на "итерируемый".
    – NeedH8
    31 окт 2017 в 10:31
  • Поправил - теперь работает 31 окт 2017 в 10:32
  • Обратите внимание, что CSS тоже нужно изменить Вместо #closeButton стало .closeButton 31 окт 2017 в 10:34
0

Мне кажется, что может быть проблема с тем, что у Вас несколько элементов имеют одинаковый идентификатор nameToClose.

1
  • так оно и есть id у всех одинаковый и поэтому не получается
    – Anton
    31 окт 2017 в 10:14

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

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