為什么點擊事件只對一個元素有效？

Question

我嘗試彈出每個項目並使背景 go 變暗，彈出總是有效，但深色背景僅在最后一個元素中有效，我已經嘗試了一整晚，如何修復它並且它會起作用？

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

您有 2 個 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';