时间戳

首页 > 解决方案 > 在使用 javascript 更改样式 onclick 时希望减少重复

javascript - 在使用 javascript 更改样式 onclick 时希望减少重复

问题描述

此代码当前有效，当单击每个 div 时，背景颜色和字体大小将发生变化。此外，已单击的其他两个 div 之一的格式将被删除。问题是这最终将需要大量代码，我想象的远远超过需要。我想知道如何减少重复。在这个例子中这没什么大不了的，只有三个 div，但我的实际项目需要很多很多。

我尝试包含多个 div，所以它看起来像这样；

document.querySelector(".div2, .div1").classList.remove("styles");

但这似乎不起作用。

const div1 = document.querySelector(".div1");
const div2 = document.querySelector(".div2"); 
const div3 = document.querySelector(".div3"); 

function makeBigDiv1 () {
  document.querySelector(".div1").classList.add("styles");
  document.querySelector(".div2").classList.remove("styles");
  document.querySelector(".div3").classList.remove("styles");
}

div1.addEventListener("click", makeBigDiv1);

function makeBigDiv2 () {
  document.querySelector(".div2").classList.add("styles");
  document.querySelector(".div1").classList.remove("styles");
  document.querySelector(".div3").classList.remove("styles");
}

div2.addEventListener("click", makeBigDiv2);


function makeBigDiv3 () {
  document.querySelector(".div3").classList.add("styles");
  document.querySelector(".div1").classList.remove("styles");
  document.querySelector(".div2").classList.remove("styles");
}

div3.addEventListener("click", makeBigDiv3);
.div1 {
  width:500px;
  height:100px;
  border: 2px solid black;
}

.div2 {
  width:500px;
  height:100px;
  border: 2px solid black;
}

.div3 {
  width:500px;
  height:100px;
  border: 2px solid black;
}

.styles {
  font-size: 50px;
  background-color: grey;
}
<div class="div1">One</div>
<div class="div2">Two</div>
<div class="div3">Three</div>

好吧，正如我提到的代码有效，但如果应用于大型项目，我觉得会变得过于冗长。我对此比较陌生，想写 DRY - 不要重复自己 - 代码。谢谢！

标签： javascripthtmlcssdry

解决方案

如果您希望三个 div 具有共享样式，您可以一次设置它们的样式。您还可以使许多点击功能可重复使用。这就是我要做的：

const elements = document.querySelectorAll("div")

function attachClickHandler(className) {
  return () => {
    document.querySelector(`.${className}`).classList.add('styles');
    
    document.querySelectorAll(`div:not(.${className})`).forEach(element => { element.classList.remove('styles') });
   }
}

elements.forEach(element => {
  element.addEventListener("click", attachClickHandler(element.className))
})
<html> 
    <head>
    <style>
        .div1, .div2, .div3 {
           width:500px;
           height:100px;
           border: 2px solid black;
        }
        .styles {
           font-size: 50px;
           background-color: grey;
         }
    </style>
    </head>
    <body>
        <div class="div1">One</div>
        <div class="div2">Two</div>
        <div class="div3">Three</div>
    <script>
    </script>
    </body>
</html>

在上下文中，您可能不希望向每个 div 添加事件侦听器，因此您可以将一个类添加到要使其可选择的所有 div 并按类名查找所有内容，而不是查找所有类型的 div。这也将允许您添加共享类的基本样式，而不是添加到所有 3 个 div。

推荐阅读