【发布时间】：2025-12-07 01:05:01
【问题描述】：
我对编程还很陌生，但仍然掌握编程逻辑的窍门。我浪费了几个小时试图简化这段代码，但没有雪茄。鉴于编程的基础是简化任务，我怎样才能使下面的代码更短？
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');
})提前致谢， 蒂亚戈
编辑：根据@CertainPerformance 的回答，我最终能够想出一些满足我需求的东西：
const cards = document.querySelectorAll('.modalidade__card');
const cardsArray = Array.apply(null, cards);
for (let i = 0; i < cardsArray.length; i++) {
cardsArray[i].addEventListener('mouseenter', (e) => {
for (let c = 0; c < cardsArray.length; c++) {
cardsArray[c].classList.add('blur');
};
e.target.classList.remove('blur');
});
cardsArray[i].addEventListener('mouseleave', (e) => {
for (let c = 0; c < cardsArray.length; c++) {
if (cardsArray[c].classList.contains('blur')) {
cardsArray[c].classList.remove('blur');
};
};
});
};【问题讨论】：
-
第一个改进，你可以将你的对象添加到一个集合中，然后你可以使用lambas进行操作，例如
var cards = [card1,card2,card3,card4];，然后在你的函数中你可以使用cards.filter(currentCard => currentCard != card1 ).forEach(filteredCard => { filteredCard.classList.add('blur') } );
标签： javascript css mouseover simplify mouseout