时间戳

首页 > 解决方案 > 多个模式按钮不适用于 JavaScript

javascript - 多个模式按钮不适用于 JavaScript

问题描述

在我的个人网站上，我有一个我想要互动的简历页面。在此页面上，我有多个模式按钮（用于显示特定的工作详细信息）。我尝试了许多不同的东西（例如每个按钮的唯一 ID），但是每次我让两个按钮从第二个工作中打开相同的内容时，两个按钮都会出现。换句话说，我无法让 JS 识别要打开的单独按钮模式。

我该如何解决？我是否使用 for 循环，如果是，它是如何工作的？

我的代码在下面（从那时起我就搞乱了 JS 代码，所以我知道我还有工作要做）。

var modalBtnArray = ['0', '1']

function openModal() {
  var modal = document.getElementById('simpleModal-' + arguments[0]);
  console.log('openModal was clicked' + modal);
  modal.style.display = 'block';
}

function closeModal() {
  var modal = document.getElementById('simpleModal-' + arguments[0]);
  console.log('closeModal was clicked' + modal);
  modal.style.display = 'none';
}


for (const element of modalBtnArray) {
  console.log(element);
  var modalBtn = document.getElementById('modalBtn-' + element);
  console.log('modalBtn = ' + modalBtn);
  modalBtn.addEventListener('click', openModal(element));

}


for (const element of modalBtnArray) {
  console.log(element);
  var closeBtn = document.getElementById('closeBtn-' + element);
  console.log('closeBtn = ' + closeBtn);
  closeBtn.addEventListener('click', closeModal(element));
}
#modalBtn-0 {
  background-color: lightgray;
  padding: 5px;
  color: black;
  font-weight: bold;
  border: 0;
  width: 40px;
  height: 30px;
}

#modalBtn-0:hover {
  background: darkgray;
}

#modalBtn-1 {
  background-color: lightgray;
  padding: 5px;
  color: black;
  font-weight: bold;
  border: 0;
  width: 40px;
  height: 30px;
}

#modalBtn-1:hover {
  background: darkgray;
}

#simpleModal-0 {
  display: none;
  border-radius: 6px;
  position: fixed;
  top: 50%;
  z-index: 1;
  height: 200px;
  width: 400px;
  background-color: white;
  border: black;
  overflow: auto;
}

#simpleModal-1 {
  display: none;
  border-radius: 6px;
  position: fixed;
  top: 50%;
  z-index: 1;
  height: 200px;
  width: 400px;
  background-color: white;
  border: black;
  overflow: auto;
}

.modal-content {
  background-color: white;
  margin: 5px auto;
  padding: 20px;
  box-shadow: -1px 2px 2px darkgray;
  color: black;
}

#closeBtn-0 {
  color: darkgray;
  float: right;
  font-size: 30px;
  font-weight: bold;
}

#closeBtn-0:hover,
#closeBtn-0:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

#closeBtn-1 {
  color: darkgray;
  float: right;
  font-size: 30px;
  font-weight: bold;
}

#closeBtn-1:hover,
#closeBtn-1:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

#resume p.job-details {
  color: black;
  font-weight: bold;
  font-size: 18px;
}
<h4>Amazon</h4>
<p class="job">Warehouse Worker // July 2020-Present</p>

<button id="modalBtn-0" class="button">More Details</button>
<div id="simpleModal-0" class="modal">
  <div class="modal-content">
    <span id="closeBtn-0">&times;</span>
    <h3>Job Description</h3>
    <p class="job-details">I scan in vendor products to receiving. I also research and correct any barcode problems with those products>.</p>
  </div>
</div>

<h4>Mesquite Independent School District</h4>
<p class="job">Middle School Teacher // February 2016-June 2020 <br> Substitute Teacher // October 2015-February 2016</p>

<button id="modalBtn-1" class="button">More Details</button>
<div id="simpleModal-1" class="modal">
  <div class="modal-content">
    <span id="closeBtn-1">&times;</span>
    <h3>Job Description</h3>
    <p class="job-details">I taught.</p>
  </div>
</div>

标签： javascripthtmlcss

解决方案

为了使 javascript 更具可重用性，您可以这样做。

向您的打开模式按钮添加一个类，最好以 js 部分开头js-，这样您和其他人就可以轻松了解哪些元素附加了 javascript。

具有打开/关闭模式的 id 的按钮的数据属性。注意：我通常做完整的#something.

添加/删除（切换）类，而不是通过脚本将其设置为显示无|块。

出于这个演示的目的，为了清晰起见，我对其进行了简化，但通常我可能会使用相同的单击事件来执行打开和关闭按钮，也许是一个 if 语句检查是否dataset.controls未定义，然后假设它是关闭按钮。

我做的另一个观察。当样式使用类而不是 id 时，正如您在我的示例中看到的那样，我不会为同一元素复制样式。只是请注意，我有点草率，并没有重命名您的所有课程。

const modalTogglers = document.querySelectorAll('.js-modal-toggler-action')

modalTogglers.forEach((action) => {
  action.addEventListener('click', function() {
    const modal = document.querySelector(action.dataset.controls)

    if (modal === undefined) {
      console.log('please check your id')
      return
    }

    modal.classList.toggle('modal--is-open')
  })
})

const closeModalActions = document.querySelectorAll('.js-modal-close-action')

closeModalActions.forEach((action) => {
  action.addEventListener('click', function() {
    const modal = action.closest('.modal')
    console.log('modal: ', modal)
    modal.classList.remove('modal--is-open')
  })
})
.button {
  background-color: lightgray;
  padding: 5px;
  color: black;
  font-weight: bold;
  border: 0;
  width: 40px;
  height: 30px;
}

.button:hover {
  background: darkgray;
}

.modal {
  display: none;
  border-radius: 6px;
  position: fixed;
  top: 50%;
  z-index: 1;
  height: 200px;
  width: 400px;
  background-color: white;
  border: black;
  overflow: auto;
}

.modal--is-open {
  display: block;
}

.modal-content {
  background-color: white;
  margin: 5px auto;
  padding: 20px;
  box-shadow: -1px 2px 2px darkgray;
  color: black;
}

.modal__close-button {
  color: darkgray;
  float: right;
  font-size: 30px;
  font-weight: bold;
}

.modal__close-button:hover,
.modal__close-button:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

#resume p.job-details {
  color: black;
  font-weight: bold;
  font-size: 18px;
}
<h4>Amazon</h4>
<p class="job">Warehouse Worker // July 2020-Present</p>

<button class="button js-modal-toggler-action" data-controls="#simple-modal-1">More Details</button>
<div id="simple-modal-1" class="modal">
  <div class="modal-content">
    <span class="modal__close-button js-modal-close-action">&times;</span>
    <h3>Job Description</h3>
    <p class="job-details">I scan in vendor products to receiving. I also research and correct any barcode problems with those products>.</p>
  </div>
</div>

<h4>Mesquite Independent School District</h4>
<p class="job">Middle School Teacher // February 2016-June 2020 <br> Substitute Teacher // October 2015-February 2016</p>

<button class="button js-modal-toggler-action" data-controls="#simple-modal-2">More Details</button>
<div id="simple-modal-2" class="modal">
  <div class="modal-content">
    <span class="modal__close-button js-modal-close-action">&times;</span>
    <h3>Job Description</h3>
    <p class="job-details">I taught.</p>
  </div>
</div>

推荐阅读