Почему вторая карта не работает и как это починить?

Question

У меня есть две карты (.intro), при клике на enter появляется скрытый контент.

Первая карта работает хорошо, открывает .content--second, второй картой я хочу открывать .content--three - но не могу это сделать, она вообще никак не реагирует.

Я новичок в джс, и за неделю возни с этим ничего рабочего не придумал.. : /

Фрагмент джс в котором вероятно разгадка проблемы я вынес, пример есть на кодпене

codepen

{
    class Revealer {
        constructor(el, options) {
            this.options = {
                angle: 0
            };
            Object.assign(this.options, options);

            this.DOM = {};
            this.DOM.el = el;
            this.DOM.inner = this.DOM.el.firstElementChild;
            
            this.DOM.inner.style.width = `calc(100vw * ${Math.abs(Math.cos(this.options.angle * Math.PI/180))} + 100vh * ${Math.abs(Math.sin(this.options.angle * Math.PI/180))})`;
            this.DOM.inner.style.height = `calc(100vw * ${Math.abs(Math.sin(this.options.angle * Math.PI/180))} + 100vh * ${Math.abs(Math.cos(this.options.angle * Math.PI/180))})`;
            this.DOM.el.style.transform = `rotate3d(0,0,1,${this.options.angle}deg)`;

            this.DOM.reverse = this.DOM.inner.querySelector('.content__reverse');
            if ( this.DOM.reverse ) {
                TweenMax.set(this.DOM.reverse, {rotation: -1*this.options.angle});
            }
        }
    }

    // Content elements
    const content = {
        first: document.querySelector('.content--first'),
        second: document.querySelector('.content--second')
    };

    // First page's content.
    const firstPageContent = {
        img: content.first.querySelector('.intro__img'),
        title: content.first.querySelector('.intro__title'),
        enter: content.first.querySelector('.intro__enter')
    };
}

<main>
  <div class="content content--grid content--three"> 
    <h3 class="content__title">Dale <br/>Cooper</h3>
    <p class="content__text">Lorem Ipsum</p>
    <button class="content__back" aria-label="Back to main view"></button>
  </div>
  <div class="content content--first">
    <div class="content__move">
      <div class="content__reverse">
        <div class="intro">
          <div class="intro__img" style="background-image: url(img/img.jpg)"></div>
          <h2 class="intro__title">Dale Cooper</h2>
          <a href="#" class="intro__enter">enter</a>
        </div>
      </div>
    </div>
  </div>
</main>

Answer 1

У вас две ссылки с классом "intro__enter"(на которые вы нажимаете и что-то происходит) и в строке firstPageContent.enter.addEventListener('click', showNextPage) вы вешаете обработчик события только на первую ссылку, так как firstPageContent.enter является именно той ссылкой:

 const firstPageContent = {
        img: content.first.querySelector('.intro__img'),
        title: content.first.querySelector('.intro__title'),
        enter: content.first.querySelector('.intro__enter'),
    }

но таких ссылок у вас две, поэтому нужно брать не один элемент "intro__enter", а все, воспользовавшись querySelectorAll, который отдает nodeList (псевдомассив):

const firstPageContent = {
    img: content.first.querySelector('.intro__img'),
    title: content.first.querySelector('.intro__title'),
    enter: content.first.querySelectorAll('.intro__enter'),
}

и дальше вешать обработчики событий на каждую ссылку, либо таким образом, в случае если для этих ссылок одна общая функция:

firstPageContent.enter.forEach(el => {
    el.addEventListener('click', showNextPage)
})

или вешать обработчики по отдельности на каждый элемент:

firstPageContent.enter[0].addEventListener('click', showNextPage)
firstPageContent.enter[1].addEventListener('click', вашаФункция)

БЛОГ НА HUSL

Почему вторая карта не работает и как это починить?

Ответы (1 шт):