Question

我是JS的新手，正在努力重构以下代码。它可以正常工作并打开和关闭模式窗口，但至少可以说并不特别干燥。

// Open modal windows

document.querySelector('#modal-btn1').addEventListener('click', 
  function() {
    document.querySelector('.modal1').style.display = 'block';
    document.querySelector('body').style.overflow = 'hidden';
  });

document.querySelector('#modal-btn2').addEventListener('click', 
  function() {
    document.querySelector('.modal2').style.display = 'block';
    document.querySelector('body').style.overflow = 'hidden';
  });

document.querySelector('#modal-btn3').addEventListener('click', 
  function() {
    document.querySelector('.modal3').style.display = 'block';
    document.querySelector('body').style.overflow = 'hidden';
  });

document.querySelector('#modal-btn4').addEventListener('click', 
  function() {
    document.querySelector('.modal4').style.display = 'block';
    document.querySelector('body').style.overflow = 'hidden';
  });

// Close modal windows

document.querySelector('.close-box1').addEventListener('click', 
  function () {
    document.querySelector('.modal1').style.display = 'none';
    document.querySelector('body').style.overflow = 'visible';
  });

document.querySelector('.close-box2').addEventListener('click', 
  function () {
    document.querySelector('.modal2').style.display = 'none';
    document.querySelector('body').style.overflow = 'visible';
  });

document.querySelector('.close-box3').addEventListener('click', 
  function () {
    document.querySelector('.modal3').style.display = 'none';
    document.querySelector('body').style.overflow = 'visible';
  });

document.querySelector('.close-box4').addEventListener('click', 
  function () {
    document.querySelector('.modal4').style.display = 'none';
    document.querySelector('body').style.overflow = 'visible';
  });

任何朝着正确方向的指针将不胜感激。

Answer 1

通过编写使用变量的函数，可以轻松地减少重复代码的数量。这就是编程的美！

例如，为所有按钮提供某种描述符，您可以使用它们来唯一标识应打开的模式，然后编写单个事件侦听器以打开正确的模式。

示例：

如果您具有这样的元素和模态：

<button class='modal-button' data-target-modal='modal-1'>
 Open Modal 1
</button>

<div id='modal-1' class='modal'>
  Hi I am modal 1
</div>

然后您可以使用单个功能来为所有这些功能供电：

document.addEventListener('click', (event) => {

  let clickedEl = event.target;

  // do this when we click a modal-button
  if(clickedEl.classList.contains('modal-button')) {

     // get the id of the modal via getAttribute
     let modalId = clickedEl.getAttribute('data-target-modal');

     // now get a reference to the actual modal html element
     let modalEl = document.getElementById(modalId);

     // open it!
     modalEl.classList.add('open');


  }
  else
  if(clickedEl.classList.contains('modal-close-button')) {
     // do something similar here for closing!
  }
})

https://jsfiddle.net/ryc8xzan/

Answer 2

您可以使用类来创建事件，并使用自定义属性将每个click事件链接到其模式

查看代码示例

document.querySelectorAll('.modal-btn').forEach(function(item){  
  item.addEventListener('click', 
  function(e) {
    var target = item.getAttribute("data-modal");
    document.querySelector(target).style.display = 'block';
    document.querySelector('body').style.overflow = 'hidden';
  });
})

.modal {
  display:none;
  background:black;
  width:150px;
  height:50x;
  color:white;
}

<button class="modal-btn" data-modal="#modal1">open modal 1</button>

<button class="modal-btn" data-modal="#modal2">open modal 2</button>

<button class="modal-btn" data-modal="#modal3">open modal 3</button>

<div id="modal1" class="modal">Modal 1</div>

<div id="modal2" class="modal">Modal 2</div>

<div id="modal3" class="modal">Modal 3</div>

Answer 3

const ID = "#";
const CLASS = ".";

const addEvent = (idOrClass, name, elementsLength, modalDisplay, bodyOverflow) => {
   for(let i=1; i <= elementLength; i++){
     document.querySelector(`${idOrClass}${name}${i}`).addEventListener('click', () => {
       document.querySelector(`.modal{i}`).style.display = modalDisplay;
       document.querySelector('body').style.overflow = bodyOverflow;
     });
   }
}

addEvent(ID, 'modal-btn', 4, 'block', 'hidden');
addEvent(CLASS, 'close-box', 4, 'none', 'visible');

不是最漂亮的，但这就是我想到的最高点。通常，您会使用Bootstrap之类的框架来为您处理模态

有没有一种方法可以重构此JS代码，这样我就不会重复太多了？

3 个答案: