Javascript 两个相同的情态动词，但其中一个不起作用。为什么？

编辑：

新守则：

const modal2 = () => {
    'use strict';
class Modal {

  constructor() {
    this.triggers = document.querySelectorAll('.js-modal2');
    this.close = document.querySelectorAll('.js-close-modal');
    this.modals = document.querySelectorAll('.modal');
    this.modalInners = document.querySelectorAll('.modal-inner');

    this.listeners();
  }

  listeners() {
    window.addEventListener('keydown', this.keyDown);

    this.triggers.forEach(el => {
      el.addEventListener('click', this.openModal, false);
    });

    this.modals.forEach(el => {
      el.addEventListener('transitionend', this.revealModal, false);
      el.addEventListener('click', this.backdropClose, false);
    });

    this.close.forEach(el => {
      el.addEventListener('click', Modal.hideModal, false);
    });

    this.modalInners.forEach(el => {
      el.addEventListener('transitionend', this.closeModal, false);
    });
  }

  keyDown(e) {
    if (27 === e.keyCode && document.body.classList.contains('modal-body')) {
      Modal.hideModal();
    }
  }

  backdropClose(el) {
    if (!el.target.classList.contains('modal-visible')) {
      return;
    }

    let backdrop = el.currentTarget.dataset.backdrop !== undefined ? el.currentTarget.dataset.backdrop : true;

    if (backdrop === true) {
      Modal.hideModal();
    }
  }

  static hideModal() {
    let modalOpen = document.querySelector('.modal.modal-visible');

    modalOpen.querySelector('.modal-inner').classList.remove('modal-reveal');
    document.querySelector('.modal-body').addEventListener('transitionend', Modal.modalBody, false);
    document.body.classList.add('modal-fadeOut');
  }

  closeModal(el) {
    if ('opacity' === el.propertyName && !el.target.classList.contains('modal-reveal')) {
      document.querySelector('.modal.modal-visible').classList.remove('modal-visible');
    }
  }

  openModal(el) {
    if (!el.currentTarget.dataset.modal) {
      console.error('No data-modal attribute defined!');
      return;
    }

    let modalID = el.currentTarget.dataset.modal2;
    let modal2 = document.getElementById(modalID);

    document.body.classList.add('modal-body');
    modal.classList.add('modal-visible');
  }

  revealModal(el) {
    if ('opacity' === el.propertyName && el.target.classList.contains('modal-visible')) {
      el.target.querySelector('.modal-inner').classList.add('modal-reveal');
    }
  }

  static modalBody(el) {
    if ('opacity' === el.propertyName && el.target.classList.contains('modal') && !el.target.classList.contains('modal-visible')) {
      document.body.classList.remove('modal-body', 'modal-fadeOut');
    }
  }}



new Modal();
};

export default modal2;

如果时间有点长，我很抱歉。 我的页面上有两个ul元素，其中包含一个列表，看起来像地铁地图

对于第一个ul，我在li元素中创建了一个类，用于获取模式中弹出的json数据。 这种模式有效

问题是我的第二个模态。 这里我有一个简单的按钮，当我点击该按钮时，我希望弹出一个模态，包含我的第二个ul元素。 问题是我无法让这个模式工作。 我重命名了所有东西，包括html、css和脚本，我快发疯了，因为我找不到错误。我需要今晚完成这个项目，所以我对它越来越失望

我的测试页面在这里： 第二部分是我的工作模式。 第三种是非工作模态

html

`<div class="map">

            <ul>
                        <li id="getTime" class="js-modal" data-modal="modal-1"><a href="">Text</a></li>
                        <li id="getTime2" class="js-modal" data-modal="modal-1"><a href="">Text</a></li>
                        <li id="getTime3" class="js-modal" data-modal="modal-1"><a href="">Text</a></li>
                        <li id="getTime4" class="js-modal" data-modal="modal-1"><a href="">Text</a></li>
                        <li id="getTime5" class="js-modal" data-modal="modal-1"><a href="">Text</a></li>
                        <li id="getTime6" class="js-modal" data-modal="modal-1"><a href="">Text</a></li>
                        <li id="getTime7" class="js-modal" data-modal="modal-1"><a href="">Text</a></li>
                        <li id="getTime8" class="js-modal" data-modal="modal-1"><a href="">Text</a></li>
                        <li id="getTime9" class="js-modal" data-modal="modal-1"><a href="">Text</a></li>
                        <li id="getTime10" class="js-modal" data-modal="modal-1"><a href="">Text</a></li>
                        <li id="getTime11" class="js-modal" data-modal="modal-1"><a href="">Text</a></li>
                        <li id="getTime12" class="js-modal" data-modal="modal-1"><a href="">Text</a></li>

             </ul>
                    <h2>Text</h2>

            <div id="modal-1" class="modal">

                <div class="modal-inner">
                    <div id="modal-body">
                      </div>
                  <a class="js-close-modal">&times;</a>
                  <div class="modal-content">

                <p class="modal-headline">Text</p>

                      </div>

                  </div><!-- .modal-content -->
                </div><!-- .modal-inner -->
              </div><!-- .modal -->

<!-- SECOND MODAL (NOT WORKING) -->

<div class="trains">
    <button class="js-modal2" data-modal="modal-2">Tjek driften</button>


            <div id="modal-2" class="modal2">

                <div class="modal-inner2">
                    <div id="modal-body2">
                      </div>
                  <a class="js-close-modal2">&times;</a>
                  <div class="modal-content2">

                <p class="modal-headline">Drift</p>
               <ul>
                        <li><a href="">Text</a></li>
                        <li><a href="">Text</a></li>
                        <li><a href="">Text</a></li>
                        <li><a href="">Text</a></li>
                        <li><a href="">Text</a></li>
                        <li><a href="">Text</a></li>
                        <li><a href="">Text</a></li>
                        <li><a href="">Text</a></li>
                        <li><a href="">Text</a></li>
                        <li><a href="">Text</a></li>
                        <li><a href="">Text</a></li>
                        <li><a href="">Text</a></li>

             </ul>

                      </div>

                  </div><!-- .modal-content2 -->
                </div><!-- .modal-inner2 -->`

不起作用的模态的CSS

.modal-body2 {
  overflow: hidden;
  position: relative;
}

#modal-body2 {
     background:#900;
}
.modal-body2:before {
  position: fixed;
  display: block;
  content: '';
  top: 0px;
  bottom: 0px;
  right: 0px;
  left: 0px;
  background-color: rgba(0, 0, 0, 0.75);
  z-index: 10;
}

.modal-body2:before {
  -webkit-animation: fadeIn 320ms ease;
  animation: fadeIn 320ms ease;
  transition: opacity ease 320ms;
}

.modal-body2.modal2-fadeOut:before {
  opacity: 0;
}


.modal2 {
  transition: all ease 0.01s;
  display: block;
  opacity: 0;
  height: 0;
  position: fixed;
  content: '';
  top: 0;
  left: 0;
  right: 0;
  z-index: 2000;
  text-align: center;
  overflow: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.modal2.modal2-visible {
  opacity: 1;
  height: auto;
  bottom: 0;
}


.modal-inner2 {
  transition: all ease 320ms;
  -webkit-transform: translateY(-50px);
  transform: translateY(-50px);
  position: relative;
  display: inline-block;
  background-color: #fff;
  width: 90%;
  max-width: 600px;
  background: #fff;
  opacity: 0;
  margin: 40px 0;
  border-radius: 4px;
  box-shadow: 0 30px 18px -20px #020202;
}

.modal-inner2.modal2-reveal {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  opacity: 1;
}


.js-close-modal2 {
  transition: color 320ms ease;
  color: #9e9e9e;
  opacity: 0.75;
  position: absolute;
  z-index: 2;
  right: 0px;
  top: 0px;
  width: 30px;
  height: 30px;
  line-height: 30px;
  font-size: 20px;
  cursor: pointer;
  text-align: center;
}

.js-close-modal2:hover {
  color: #000;
}

模式的脚本

const modal = () => {
'use strict';
class Modal {

  constructor() {
    this.triggers = document.querySelectorAll('.js-modal');
    this.close = document.querySelectorAll('.js-close-modal');
    this.modals = document.querySelectorAll('.modal');
    this.modalInners = document.querySelectorAll('.modal-inner');

    this.listeners();
  }

  listeners() {
    window.addEventListener('keydown', this.keyDown);

    this.triggers.forEach(el => {
      el.addEventListener('click', this.openModal, false);
    });

    this.modals.forEach(el => {
      el.addEventListener('transitionend', this.revealModal, false);
      el.addEventListener('click', this.backdropClose, false);
    });

    this.close.forEach(el => {
      el.addEventListener('click', Modal.hideModal, false);
    });

    this.modalInners.forEach(el => {
      el.addEventListener('transitionend', this.closeModal, false);
    });
  }

  keyDown(e) {
    if (27 === e.keyCode && document.body.classList.contains('modal-body')) {
      Modal.hideModal();
    }
  }

  backdropClose(el) {
    if (!el.target.classList.contains('modal-visible')) {
      return;
    }

    let backdrop = el.currentTarget.dataset.backdrop !== undefined ? el.currentTarget.dataset.backdrop : true;

    if (backdrop === true) {
      Modal.hideModal();
    }
  }

  static hideModal() {
    let modalOpen = document.querySelector('.modal.modal-visible');

    modalOpen.querySelector('.modal-inner').classList.remove('modal-reveal');
    document.querySelector('.modal-body').addEventListener('transitionend', Modal.modalBody, false);
    document.body.classList.add('modal-fadeOut');
  }

  closeModal(el) {
    if ('opacity' === el.propertyName && !el.target.classList.contains('modal-reveal')) {
      document.querySelector('.modal.modal-visible').classList.remove('modal-visible');
    }
  }

  openModal(el) {
    if (!el.currentTarget.dataset.modal) {
      console.error('No data-modal attribute defined!');
      return;
    }

    let modalID = el.currentTarget.dataset.modal;
    let modal = document.getElementById(modalID);

    document.body.classList.add('modal-body');
    modal.classList.add('modal-visible');
  }

  revealModal(el) {
    if ('opacity' === el.propertyName && el.target.classList.contains('modal-visible')) {
      el.target.querySelector('.modal-inner').classList.add('modal-reveal');
    }
  }

  static modalBody(el) {
    if ('opacity' === el.propertyName && el.target.classList.contains('modal') && !el.target.classList.contains('modal-visible')) {
      document.body.classList.remove('modal-body', 'modal-fadeOut');
    }
  }}



new Modal();
};

export default modal;

无法工作的模态的脚本

const modal2 = () => {
'use strict';
class Modal2 {

  constructor() {
    this.triggers = document.querySelectorAll('.js-modal2');
    this.close = document.querySelectorAll('.js-close-modal2');
    this.modals = document.querySelectorAll('.modal2');
    this.modalInners = document.querySelectorAll('.modal-inner2');

    this.listeners();
  }

  listeners() {
    window.addEventListener('keydown', this.keyDown);

    this.triggers.forEach(el => {
      el.addEventListener('click', this.openModal2, false);
    });

    this.modals.forEach(el => {
      el.addEventListener('transitionend', this.revealModal2, false);
      el.addEventListener('click', this.backdropClose, false);
    });

    this.close.forEach(el => {
      el.addEventListener('click', Modal2.hideModal2, false);
    });

    this.modalInners.forEach(el => {
      el.addEventListener('transitionend', this.closeModal2, false);
    });
  }

  keyDown(e) {
    if (27 === e.keyCode && document.body.classList.contains('modal-body2')) {
      Modal2.hideModal2();
    }
  }

  backdropClose(el) {
    if (!el.target.classList.contains('modal2-visible')) {
      return;
    }

    let backdrop = el.currentTarget.dataset.backdrop !== undefined ? el.currentTarget.dataset.backdrop : true;

    if (backdrop === true) {
      Modal2.hideModal2();
    }
  }

  static hideModal2() {
    let modalOpen = document.querySelector('.modal2.modal2-visible');

    modalOpen.querySelector('.modal-inner2').classList.remove('modal2-reveal');
    document.querySelector('.modal-body2').addEventListener('transitionend', Modal2.modalBody2, false);
    document.body.classList.add('modal2-fadeOut');
  }

  closeModal2(el) {
    if ('opacity' === el.propertyName && !el.target.classList.contains('modal2-reveal')) {
      document.querySelector('.modal2.modal2-visible').classList.remove('modal2-visible');
    }
  }

  openModal(el) {
    if (!el.currentTarget.dataset.modal) {
      console.error('No data-modal attribute defined!');
      return;
    }

    let modal2ID = el.currentTarget.dataset.modal2;
    let modal2 = document.getElementById(modal2ID);

    document.body.classList.add('modal-body2');
    modal.classList.add('modal2-visible');
  }

  revealModal2(el) {
    if ('opacity' === el.propertyName && el.target.classList.contains('modal2-visible')) {
      el.target.querySelector('.modal-inner2').classList.add('modal2-reveal');
    }
  }

  static modalBody2(el) {
    if ('opacity' === el.propertyName && el.target.classList.contains('modal2') && !el.target.classList.contains('modal2-visible')) {
      document.body.classList.remove('modal-body2', 'modal2-fadeOut');
    }
  }}



new Modal2();
};

export default modal2;

---

在javascript中，this.triggers指的是您的按钮，但在函数openModal中，变量modal2ID未定义，因为您的按钮没有数据集。modal2

您不应该需要所有第二个模态的东西-当然，open函数只需要获取数据模态属性并将其与它想要显示的模态id匹配-您需要做的就是更改第二个按钮的数据属性，并为第二个模式指定一个id以匹配查看示例页面，您在按钮数据属性中包含了错误的模式id，并且将所有其他内容绑定到--2而不是模式，这可能是它不起作用的原因。我按照建议做了，只更改了ID和数据模式属性，但现在我得到了这个错误：

uncaughttypeerror:HTMLButtonElement.openModal无法读取null的属性“classList”

问题是这一行：

modal2.classList.add（'modal-visible'）我所做的唯一一件事就是在模式后添加“2”以匹配按钮上的id。如果您只更改了按钮2和模式2的属性和模式id，那么
modal2
不应该存在。我添加了我在原始帖子顶部制作的新代码。我删除了modal2，但它只是在同一个位置
Modal.classList.add（'Modal-visible'）
const modal2 = () => {
'use strict';
class Modal2 {

  constructor() {
    this.triggers = document.querySelectorAll('.js-modal2');
    this.close = document.querySelectorAll('.js-close-modal2');
    this.modals = document.querySelectorAll('.modal2');
    this.modalInners = document.querySelectorAll('.modal-inner2');

    this.listeners();
  }

  listeners() {
    window.addEventListener('keydown', this.keyDown);

    this.triggers.forEach(el => {
      el.addEventListener('click', this.openModal2, false);
    });

    this.modals.forEach(el => {
      el.addEventListener('transitionend', this.revealModal2, false);
      el.addEventListener('click', this.backdropClose, false);
    });

    this.close.forEach(el => {
      el.addEventListener('click', Modal2.hideModal2, false);
    });

    this.modalInners.forEach(el => {
      el.addEventListener('transitionend', this.closeModal2, false);
    });
  }

  keyDown(e) {
    if (27 === e.keyCode && document.body.classList.contains('modal-body2')) {
      Modal2.hideModal2();
    }
  }

  backdropClose(el) {
    if (!el.target.classList.contains('modal2-visible')) {
      return;
    }

    let backdrop = el.currentTarget.dataset.backdrop !== undefined ? el.currentTarget.dataset.backdrop : true;

    if (backdrop === true) {
      Modal2.hideModal2();
    }
  }

  static hideModal2() {
    let modalOpen = document.querySelector('.modal2.modal2-visible');

    modalOpen.querySelector('.modal-inner2').classList.remove('modal2-reveal');
    document.querySelector('.modal-body2').addEventListener('transitionend', Modal2.modalBody2, false);
    document.body.classList.add('modal2-fadeOut');
  }

  closeModal2(el) {
    if ('opacity' === el.propertyName && !el.target.classList.contains('modal2-reveal')) {
      document.querySelector('.modal2.modal2-visible').classList.remove('modal2-visible');
    }
  }

  openModal(el) {
    if (!el.currentTarget.dataset.modal) {
      console.error('No data-modal attribute defined!');
      return;
    }

    let modal2ID = el.currentTarget.dataset.modal2;
    let modal2 = document.getElementById(modal2ID);

    document.body.classList.add('modal-body2');
    modal.classList.add('modal2-visible');
  }

  revealModal2(el) {
    if ('opacity' === el.propertyName && el.target.classList.contains('modal2-visible')) {
      el.target.querySelector('.modal-inner2').classList.add('modal2-reveal');
    }
  }

  static modalBody2(el) {
    if ('opacity' === el.propertyName && el.target.classList.contains('modal2') && !el.target.classList.contains('modal2-visible')) {
      document.body.classList.remove('modal-body2', 'modal2-fadeOut');
    }
  }}



new Modal2();
};

export default modal2;