我怎样才能简化这段代码？ 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');
})

提前致谢，蒂亚戈

编辑：基于@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');
            };
        };
    });
};

Answer 1

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

.cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
  pointer-events: none;
}

li {
    pointer-events: auto;
}
.cards:hover > * {
  filter: blur(5px);
  transition: filter .1s;
}

.cards > * {
  padding: 2rem;
  margin: 8px;
  background: bisque;
}

.cards > *:hover {
  filter: none;
}

<ul class="cards">
  <li>Card 1</li>
  <li>Card 2</li>
  <li>Card 3</li>
  <li>Card 4</li>  
</ul>

Answer 2

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

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');
    }
  }
});

请注意，要使事件委托起作用，您必须使用冒泡的事件 - mouseover 和 mouseout 冒泡，但 mouseenter 和 mouseleave 不会. （或者您可以遍历每张卡片并使用 mouseenter 和 mouseleave 为每个卡片添加一个侦听器）

Answer 3

例如，我们可以

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

var mouseenter = function(){
    if(this != card1) card1.classList.add('blur');
    if(this != card2) card2.classList.add('blur');
    if(this != card3) card3.classList.add('blur');
    if(this != card4) card4.classList.add('blur');
};
var mouseleave = function(){
    if(this != card1) card1.classList.remove('blur');
    if(this != card2) card2.classList.remove('blur');
    if(this != card3) card3.classList.remove('blur');
    if(this != card4) card4.classList.remove('blur');
};

card1.addEventListener('mouseenter', mouseenter);
card1.addEventListener('mouseleave', mouseleave);
card2.addEventListener('mouseenter', mouseenter);
card2.addEventListener('mouseleave', mouseleave);
card3.addEventListener('mouseenter', mouseenter);
card3.addEventListener('mouseleave', mouseleave);
card4.addEventListener('mouseenter', mouseenter);
card4.addEventListener('mouseleave', mouseleave);

Answer 4

试试下面的方法

const card1 = document.getElementById("card1"),
  card2 = document.getElementById("card2"),
  card3 = document.getElementById("card3"),
  card4 = document.getElementById("card4");

// onMouse Effect
const onMouse = (ele, type = "enter") => {
  ele.forEach((item) =>
    type === "enter"
      ? item.classList.add("blur")
      : item.classList.remove("blur")
  );
};
// Card 1
card1.addEventListener("mouseenter", () => onMouse([card2, card3, card4]));
card1.addEventListener("mouseleave", () =>
  onMouse([card2, card3, card4], "leave")
);
// Card 2
card2.addEventListener("mouseenter", () => onMouse([card1, card3, card4]));
card2.addEventListener("mouseleave", () =>
  onMouse([card1, card3, card4], "leave")
);
// Card 3
card3.addEventListener("mouseenter", () => onMouse([card2, card1, card4]));
card3.addEventListener("mouseleave", () =>
  onMouse([card2, card1, card4], "leave")
);
// Card 4
card4.addEventListener("mouseenter", () => onMouse([card2, card3, card1]));
card4.addEventListener("mouseleave", () =>
  onMouse([card2, card3, card1], "leave")
);

.cursor-pointer {
  cursor: pointer;
}
h1 {
  font-size: 2em;
}
.blur h1 {
  font-size: 1em;
  text-align: center;
  color: transparent;
  text-shadow: #111 0 0 15px;
  transition: 0.4s;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
      integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
      crossorigin="anonymous"
    />
  </head>
  <body>
    <section class="container">
      <div class="p-5 m-5 text-center bg-primary cursor-pointer" id="card1">
        <h1>Card 1</h1>
      </div>
      <div class="p-5 m-5 text-center bg-primary cursor-pointer" id="card2">
        <h1>Card 2</h1>
      </div>
      <div class="p-5 m-5 text-center bg-primary cursor-pointer" id="card3">
        <h1>Card 3</h1>
      </div>
      <div class="p-5 m-5 text-center bg-primary cursor-pointer" id="card4">
        <h1>Card 4</h1>
      </div>
    </section>
  </body>
</html>

我怎样才能简化这段代码？ JavaScript + css3

How could I simplify this code? JavaScript + css3

javascript

css

mouseover

simplify

mouseout