个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
此代码目前有效，当单击每个 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 - 不要重复自己 - 代码。谢谢!
最佳答案
如果你想让三个 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。
关于javascript - 使用javascript更改样式onclick时希望减少重复，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56587391/
25
4
0
对于我不断地用刽子手问题来打扰这个论坛，我深表歉意。我希望很快就能完成这件事。确实在这方面一直在努力。这是到目前为止我的代码: #include #include #include #defin
这篇文章是 this one 的延续. 我试图了解我是否是唯一一个错过并需要 .NET 泛型类型继承其泛型参数类型之一的能力的人。 面临的挑战是收集支持此功能的令人信服的理由，或者，要知道没有。 我给
我正在使用下面的代码设计一个 3 小时的 JavaScript 倒计时 var count = 10800; var counter = setInterval(timer, 1000); //1
我正在处理验证并放置一个 html 模式属性，并希望在不点击保存/提交按钮的情况下查看错误消息。当我在字段外单击时，它应该根据我的模式条件进行验证。 这是我的代码: Extra Credit Da
我有一个像这样的 mysql 表结构: id int primary key name varchar start_time float 数据可能是这样的: id name
我试图在桌面上保留一张带有描述的图片，然后在移动设备上希望图片在左边，描述在右边……更多的是尽可能让所有内容都在首屏。 我希望桌面上的 DIV 是: 一个一个 BBB 但是在手机上: A B A B
我通过 Stackoverflow 进行了搜索，发现很多人试图避免 CSS 列中的重叠，但实际上我被要求让文本和图像重叠。 更新: 更好的图像解释了我被要求做的事情，以及指向我正在使用的代码的链接。谢
我在我的框架中设置了几个协议(protocol)来处理资源。在其中一个协议(protocol)中，我设置了一个扩展来为 decode 函数提供默认实现。显示代码和发生的情况更简单(请参阅对 fatal
我想同时加载，或者在上面的图像之后立即加载。它会在图像和标题 div 在预加载器内旋转之前不断加载 - 不好!这是 HTML: ✕ Various inv
我目前正在开发一个小游戏。我使用 getKeyCode 来移动我的角色，但问题是我不希望你在按住按钮的情况下能够继续移动。无论如何，我是否可以使用 getKeyCode 仅在第一次单击时注册，然后在释
我需要设置 width 或 max-width 才能让 margin:auto 工作，对吗？ Like in this jsFiddle . 问题是，段落宽度等于 max-width，因此文本 blo
您好，我在同一页面上有一个表单和一个 Paypal 订阅按钮。在重定向到 Paypal 付款之前，我想在单击提交表单(通过电子邮件发送给我)时订阅按钮。 > >
我想让用户在点击一个文本字段时感觉就像我们点击一个按钮，在释放按钮后它会在很短的时间内变成橙色，然后闪烁并再次变成它的第一种颜色。当我点击它时它运行良好但没有出现颜色闪烁。 布局文件 主要 Ac
我怎样才能让我的 MediaPlayer 继续播放，即使在手机锁定和屏幕关闭的情况下，我认为它可能必须做一些使其成为服务但不确定的事情。如果是这样，我该如何将其更改为服务，或者是否有更快更简单的修复方
有人可以帮助我理解内存泄漏的概念以及特定数据结构如何促进/防止它(例如链表、数组等)。前段时间我被两个不同的人教过两次——由于教学方法的不同，这让我有点困惑。 最佳答案 维基百科有一个 good de
我希望 HTML 表单在提交后不执行任何操作。 action="" 不好，因为它会导致页面重新加载。 基本上，我希望在按下按钮或有人在输入数据后点击 Enter 时调用 Ajax 函数。是的，我可以删
我正在执行一个程序 say A from another，首先是 fork-ing，然后是 execve()。现在的问题是我希望 A 使用我通常使用 LD_PRELOAD 来完成的库。我如何在 exe
我目前正在为我们公司测试 Autofac。 我们希望有以下规则: 如果接口(interface)只实现了一次，则使用 builder.RegisterAssemblyTypes 自动添加它(见下文)。
正如 Scott Meyers 和 Andrei Alexandrescu 在 this 中概述的那样文章 简单尝试实现双重检查锁定实现在 C++ 中特别是不安全的，并且通常在不使用内存屏障的多处理器
目前我有一些代码可以在点击时改变图像，但这段代码是在一个 php HTML 循环中所以事情变得棘手，点击一个开关会使每个故事的开关都激活，因为它是基于 CSS 运行的.如何让它们独立交换？ $("
我是一名优秀的程序员,十分优秀！