为什么点击事件只对一个元素有效

Question

我试着弹出每一个项目，让背景变暗，弹出总是有效的，但暗背景只在最后一个元素中有效，我已经尝试了一整夜，我该如何修复它，它会起作用？

const pro_po = function (){
const item_4_1_1 = document.getElementById('item-4-1-1')
const item_4_1_2 = document.getElementById('item-4-1-2')
const item_4_2_1 = document.getElementById('item-4-2-1')
const item_4_2_2 = document.getElementById('item-4-2-2')
const item_4_2_3 = document.getElementById('item-4-2-3')
const ov_bg = document.getElementById('ov-bg')
const ov_bg_display = document.querySelector('.ov-bg-display')
document.addEventListener('click',(e)=>{
if(e.target == item_4_1_1 || e.target == item_4_1_2 ){
item_4_1.style =`display:block`;
ov_bg.classList.remove('ov-bg-display');
}else{
item_4_1.style =`display:none`;
ov_bg.classList.add('ov-bg-display');
}
if(e.target == item_4_2_1 || e.target == item_4_2_2 || e.target == 
item_4_2_3 ){
item_4_2.style =`display:block`;
ov_bg.classList.remove('ov-bg-display');
}else{
item_4_2.style =`display:none`;
ov_bg.classList.add('ov-bg-display');
}  
})
}()

Answer 1

您有两个if语句，它们都会更改ov_bg.classlist。因此，在第一个if部分之后，第二个if部分会再次更改它。你不能把那个部分放在两个单独的语句中，只能放在一个语句中。

// Adds or removes on ov_bg
if(e.target == item_4_1_1 || e.target == item_4_1_2 ){
item_4_1.style =`display:block`;
ov_bg.classList.remove('ov-bg-display');
}else{
item_4_1.style =`display:none`;
ov_bg.classList.add('ov-bg-display');
}

if(e.target == item_4_2_1 || e.target == item_4_2_2 || e.target == item_4_2_3 ){
item_4_2.style =`display:block`;
ov_bg.classList.remove('ov-bg-display');
}else{
item_4_2.style =`display:none`;
ov_bg.classList.add('ov-bg-display'); // Because this else, it will overwrite the previous part
}  

Answer 2

我认为这可能是问题所在：

item_4_2.style='display:block'；

这个：

item_4_2.style='display:none'；