我如何简化此代码？ JavaScript + CSS3

Question

我对编程还很陌生，但仍然掌握了编程逻辑。我浪费了几个小时来简化这段代码，但没有雪茄。鉴于编程的基础是简化任务，我如何使以下代码更短？

var card1 = document.getElementById('card1');
var card2 = document.getElementById('card2');
var card3 = document.getElementById('card3');
var card4 = document.getElementById('card4');

// card 1
card1.addEventListener('mouseenter', function(){
    card2.classList.add('blur');
    card3.classList.add('blur');
    card4.classList.add('blur');
})

card1.addEventListener('mouseleave', function(){
    card2.classList.remove('blur');
    card3.classList.remove('blur');
    card4.classList.remove('blur');
})

// card 2
card2.addEventListener('mouseenter', function(){
    card1.classList.add('blur');
    card3.classList.add('blur');
    card4.classList.add('blur');
})

card2.addEventListener('mouseleave', function(){
    card1.classList.remove('blur');
    card3.classList.remove('blur');
    card4.classList.remove('blur');
})

// card 3
card3.addEventListener('mouseenter', function(){
    card1.classList.add('blur');
    card2.classList.add('blur');
    card4.classList.add('blur');
})

card3.addEventListener('mouseleave', function(){
    card1.classList.remove('blur');
    card2.classList.remove('blur');
    card4.classList.remove('blur');
})

// card 4
card4.addEventListener('mouseenter', function(){
    card1.classList.add('blur');
    card2.classList.add('blur');
    card3.classList.add('blur');
})

card4.addEventListener('mouseleave', function(){
    card1.classList.remove('blur');
    card2.classList.remove('blur');
    card3.classList.remove('blur');
})

谢谢，蒂亚戈

Answer 1

您可以使用类而不是ID来获取所有卡的集合。然后，您可以在所有卡的container上使用事件委托。输入其中一张卡片后，请遍历集合，然后模糊其余的卡片。当其中一张卡片剩下时，在集合上循环并消除模糊：

const cards = document.querySelectorAll('.card');
container.addEventListener('mouseover', (e) => {
  if (e.target.matches('.card')) {
    for (const card of cards) {
      card.classList.add('blur');
    }
    e.target.classList.remove('blur');
  }
});
container.addEventListener('mouseout', (e) => {
  if (e.target.matches('.card')) {
    for (const card of cards) {
      card.classList.remove('blur');
    }
  }
});

Answer 2

您可以使用css :hover伪选择器代替javascript。

.card:hover {
  filter: blur(0.5); /* or whatever */
}

Answer 3

在HTML中，将id="card1"等全部替换为class="card"，然后在CSS中，将.blur替换为.card:not(:hover)。