如何通过迭代实现基于数组数据的JavaScript模态框内容模块化

修改后的完整代码 #

const arrayDatasModal = [
    [ "Modélisation d'un challet", "Modélisation d'une chambre", "Modélisation d'un appartement", "Modélisation en 3D d'un aménagement extérieur", "Modélisation d'une maison","Modélisation d'un appartemment","Modélisation d'unne chambre", "Modélisation en 3D d'un appartemment"],
    ["img/portfolio/Chalet-Allos-scaled.jpeg","img/portfolio/master-room-scaled.jpeg","img/portfolio/renovation-appartement-3D-à-cannes-1.jpeg","img/portfolio/Modélisation en 3D d'un aménagement extérieur.jpg","img/portfolio/ENTRE INSTA.jpg","img/portfolio/renovation-appartement-3D-à-cannes-2.jpeg","img/portfolio/rénovation-chambre-en-3D-à-Nice.jpeg","img/portfolio/renovation-appartement-3D-à-cannes-1.jpeg"],
];
const modalOpener = document.querySelectorAll('.modal-launcher')

const wrapper = document.querySelector(".modal-wrapper"),
header = wrapper.querySelector("header");

// 给函数添加索引参数，用于匹配数组对应内容
function createContentModal(index){
    wrapper.style.visibility = 'visible';

    const modalName = document.querySelector('.modal-title h3');
    modalName.textContent = arrayDatasModal[0][index];

    const modalImg = document.querySelector('.modal-img');
    modalImg.src = arrayDatasModal[1][index];
};

// 循环绑定事件时，传递当前触发元素对应的索引
for (let i = 0; i < modalOpener.length; i++) {
    modalOpener[i].addEventListener("click", () => createContentModal(i));
}

关键修改说明 #

• 给createContentModal函数添加index参数，替换原来固定的0索引，让函数可以根据传入的索引获取数组对应位置的内容。
• 在事件绑定环节，用箭头函数包裹createContentModal(i)，确保每个触发元素点击时，能把自己对应的循环索引传递给函数，实现触发元素和数组内容的一一对应。

可选优化 #

可以添加索引合法性校验，避免因索引越界导致的错误：

function createContentModal(index){
    // 检查索引是否在数组有效范围内
    if(index < 0 || index >= arrayDatasModal[0].length) return;
    
    wrapper.style.visibility = 'visible';
    // 其余代码不变
}

内容的提问来源于stack exchange，提问作者Andy Grc