通过单击元素确定数组索引

Question

我已经为网站的简单弹出功能编写了一些代码，并且只要我单独指定每个弹出框的数组索引就可以使它工作，但这需要我手动复制代码每个数组索引。见下文：

/* POP UP BOXES */ 
var services = document.querySelectorAll('.service-box');
var popUps = document.querySelectorAll('.popup-box')
var closePopUp = document.querySelectorAll('.close');
var shadow = document.getElementById('shadow');

// open first popup
services[0].addEventListener('click', () => {
    popUps[0].style.display = 'block';
    shadow.style.display = 'block';
});
// open second popup
services[1].addEventListener('click', () => {
    popUps[1].style.display = 'block';
    shadow.style.display = 'block';
});
// open third popup
services[2].addEventListener('click', () => {
    popUps[2].style.display = 'block';
    shadow.style.display = 'block';
});
// close first popup
closePopUp[0].addEventListener('click', () => {
    popUps[0].style.display = 'none';
    shadow.style.display = 'none';
});
// close second popup
closePopUp[1].addEventListener('click', () => {
    popUps[1].style.display = 'none';
    shadow.style.display = 'none';
});
// close third popup
closePopUp[2].addEventListener('click', () => {
    popUps[2].style.display = 'none';
    shadow.style.display = 'none';
});
/* END POP UP BOXES*/

我在想必须有一种方法将我添加到数组索引的所有事件侦听器组合成一个事件侦听器，这取决于单击的元素的索引。我自己无法想出比这更优雅的东西，所以在一些帮助之后。我对 javascript 还是很陌生，因此我们将不胜感激。

HTML如下（忽略占位符文本）

<div class="section-inside">
  <div class="service-box web-dev">
    <img src="img/code.png" alt="Web Development Icon">
    <h4>Web Development</h4>
    <p>Build your brand new website from scratch, expertly tailored to the needs of your business. </p>
    <span>Find out more</span>
  </div>

  <div id="web-dev" class="popup-box">
    <h2>Web Development</h2>
    <p>
      Scuttle rigging scurvy cog lee nipper Letter of Marque transom Buccaneer Privateer. 
      Chain Shot ho Letter of Marque hornswaggle booty fathom jack bounty maroon Barbary Coast. 
      Nipperkin Barbary Coast measured fer yer chains blow the man down Letter of Marque 
      smartly splice the main brace furl parley starboard.
    </p>
    <span class="close">&times;</span>
  </div>

  <div class="service-box cro">
    <img src="img/optimisation.png" alt="Coversion Rate Optimisation Icon">
    <h4>Conversion Rate Optimisation</h4>
    <p>Fine-tune your website to guide traffic in the right direction to help you deliver your goals.</p>
    <span>Find out more</span>
  </div>

  <div id="cro" class="popup-box">
    <h2>Conversion Rate Optimisation</h2>
    <p>
      Scuttle rigging scurvy cog lee nipper Letter of Marque transom Buccaneer Privateer. 
      Chain Shot ho Letter of Marque hornswaggle booty fathom jack bounty maroon Barbary Coast. 
      Nipperkin Barbary Coast measured fer yer chains blow the man down Letter of Marque 
      smartly splice the main brace furl parley starboard.
    </p>
    <span class="close">&times;</span>
  </div>
  
  <div class="service-box analytics">
    <img src="img/analytics.png" alt="Analytics Icon">
    <h4>Analytics</h4>
    <p>Set up systems to analyse and understand the activity of users reaching your website.</p>
    <span>Find out more</span>
  </div>

  <div id="analytics" class="popup-box"> 
    <h2>Analytics</h2>
    <p>
      Scuttle rigging scurvy cog lee nipper Letter of Marque transom Buccaneer Privateer. 
      Chain Shot ho Letter of Marque hornswaggle booty fathom jack bounty maroon Barbary Coast. 
      Nipperkin Barbary Coast measured fer yer chains blow the man down Letter of Marque 
      smartly splice the main brace furl parley starboard.
    </p>
    <span class="close">&times;</span>
  </div>
</div>

Answer 1

我不知道你的确切 HTML，但我想你可以使用 forEach 和 closures。

例如

const services = document.querySelectorAll('.service-box');
const popUps = document.querySelectorAll('.popup-box');
const closePopUps = document.querySelectorAll('.close');

services.forEach((service, index) => {
  service.addEventListener('click', () => {
    popUps[index].style.display = 'block';
  });
});

closePopUps.forEach((closePopUp, index) => {
  closePopUp.addEventListener('click', () => {
    popUps[index].style.display = 'none';
  });
});

编辑：

我添加了第二个 forEach 以匹配您的 HTML。在这里查看： JSFiddle

Answer 2

       const services = document.querySelectorAll('.service-box');
        const popUps = document.querySelectorAll('.popup-box');
        let index;
    // converting nodelist to array
    
        const servicesArray = Array.prototype.slice.call(services);
        const popUpsArray = Array.prototype.slice.call(popUps);
// attaching eventlisteners to services
            for(let i = 0; i < servicesArray.length; i++) {
                
                servicesArray[i].addEventListener('click', function() {
                    // get index of current service which is clicked
                    index = servicesArray.indexOf(this);
                    // checking if popUp of same index as services is block if so change it to none
                    if(popUpsArray[index].style.display === 'block') {
                    popUpsArray[index].style.display = 'none';
                    }
                    else {
                        // checking if any previous popUp is block so change it to none
                        for(let i = 0; i < popUpsArray.length; i++) {
                            if(popUps[i].style.display === 'block') {
                                popUpsArray[i].style.display = 'none';
                            };
                        };
                        popUps[index].style.display = 'block';   
                    }
                });
            };