个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
27
4
我有 3 个 div 作为颜色可供选择，还有 3 个空白 div。我想让用户能够:
(1) 点击一个彩色的div，然后点击一个空白的div，然后空白的div 被着色为用户选择的颜色。而且代码似乎有效。
(2) 我希望用户能够再次单击彩色空白 div，它变成白色。而且代码似乎有效。
问题是，如果空白 div 是彩色的，而用户选择另一种颜色并再次单击彩色空白 div，则会向 div 添加一个更新的颜色类，事情变得不可预测。你可以打开控制台，跟踪空白div的class的乱七八糟的变化。
我该如何解决这个问题？我只希望空白 div 在两个类之间切换。
var chosenColor;
function pickColor(arg){
chosenColor=arg.id;
}
function draw(id){
document.getElementById(id).classList.toggle("white");
document.getElementById(id).classList.toggle(chosenColor);
}.box{
width: 100px;
height: 100px;
border: 1px solid black;
display: inline-block;
}
.red{background: red}
.blue{background: blue;}
.yellow{background: yellow;}
.white{background: white;}<html>
<body>
<div class="box red" id="red" onclick="pickColor(this)">1</div>
<div class="box blue" id="blue" onclick="pickColor(this)">2</div>
<div class="box yellow" id="yellow" onclick="pickColor(this)">3</div>
<br><br>
<div class="box white" id="4" onclick="draw(4)">4</div>
<div class="box white" id="5" onclick="draw(5)">5</div>
<div class="box white" id="6" onclick="draw(6)">6</div>
</body>
</html>最佳答案
而不是使用类并遇到分配多个嵌套类或必须使用复杂的白色逻辑的问题......
我会使用 data-* 属性:
var chosenColor;
function pick(el) {
chosenColor = el.dataset.color;
}
function draw(el) {
el.dataset.color = el.dataset.color ? "" : chosenColor;
}body { background: #eee; }
.box {
width: 100px;
height: 100px;
border: 1px solid black;
display: inline-block;
background: white; /* BY DEFAULT !!! */
}
[data-color=red] { background: red; }
[data-color=blue] { background: blue; }
[data-color=yellow] { background: yellow; }<div class="box" onclick="pick(this)" data-color="red">1</div>
<div class="box" onclick="pick(this)" data-color="blue">2</div>
<div class="box" onclick="pick(this)" data-color="yellow">3</div>
<br><br>
<div class="box" onclick="draw(this)">4</div>
<div class="box" onclick="draw(this)">5</div>
<div class="box" onclick="draw(this)">6</div>什么是三元 el.dataset.color = el.dataset.color ？ "": chosenColor; 做的是:
data-color 将 data-color 设置为 "" (无) data-color设置为预选的chosenColor关于javascript - 多个 div 的 classList.toggle()，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52844780/
27
4
0
这个问题已经有答案了: Where has fn.toggle( handler(eventObject), handler(eventObject)...) gone? (4 个回答) 已关闭10
有没有直接的使用方法--toggle和 --no-toggle使用 Python 的 argparse 标记？ 现在我正在使用类似于以下内容的东西: import argparse parser =
我正在尝试实现 jquery UI 切换功能。 这是我目前所拥有的: http://jsfiddle.net/PauWy/470/ 我试图做到这一点，当我点击 Item1 时，会出现“+”和“-”，我
现在 toggle(...) 是 deprecated in jQuery 1.8然后removed in jQuery 1.9 在常规中可以使用什么(除了使用 jQuery 迁移脚本)来代替具有相同
我在使用 bootstrap 的切换功能时遇到问题。 这个想法是让一个复选框(引导切换)打开或关闭第二个复选框(引导切换)。遗憾的是，它尚未在网页上运行。我注意到，通过删除“data-toggle='
我有一些 DIV，我正在使用 JQuery 使用 toggle() 函数来隐藏和显示它们。这一直运行良好。 但我只是认识到其中一些 DIV 之间的一些关系，这使我可以将其中一些 DIV 分组到一个类中
我想要三个 SwiftUI 切换开关，如果一个打开，另外两个关闭。 使用 UIKit 执行此类操作的旧方法是 didSet{}，这不是 SwiftUI 的正确方法。我不知道是否有必要深入研究Combi
我想做的是:当达到一定数量的页面滑动时，使网站的顶部栏向下切换。即，当用户向下滑动 328px 时，顶部栏向下滑动并固定在顶部。 问题是当用户向下滑动到328px的时候，top bar div就开始上
上下文 我正在使用 Bootstrap 主题，现在我注意到，当主题更新到 Bootstrap 5 时，所有 data-toggle 属性都被替换为 data-bs-toggle (除了一个，哪个元素仍
我有一个来自 Bootstrap 示例的“标准”测试导航栏，但是使用 active_links gem导航栏 => 品牌 - 关于 - 第 1 页 - 第 2 页 - 页面(第 3 页 - 第 4 页
我只是无法理解 Eclipse 中菜单的 Run 按钮下的两个选项。通常断点不是指一行吗？我意识到可能存在这种情况: if (x >= 0 && x = 0 && y < 4) source
如果有任何反馈或见解可以帮助我解决我面临的最后一个问题，我将不胜感激。我的代码很庞大。 我有 4 个开关。打开时的每个切换都会导致标签增加 1。当我关闭并重新打开应用程序时，我还设法保存了切换位置和标
我目前正在开发一个侧边栏菜单，在该菜单中我切换类别上的“选定”类别，该类别的类别名称为“sidebar-category”。 使用 jQuery，我可以轻松实现我想要的目标:切换“选定”类后(如果我单
我正在尝试玩周围的游戏，但我对 jquery 完全是新手!所以我确实需要一些帮助:) $(function() { $('#switch').on('click', function(
所以我需要下面的当前脚本，以便能够切换。 目前，该脚本仅在按住 F8 键时起作用...这违背了 afk 脚本的要点。哈哈 无论如何，这是脚本: $F8:: Loop { if not Get
在创建 jQuery 下拉菜单时，我遇到了一个最奇怪的问题 - 已隐藏的元素仍然影响页面。为什么会发生这种情况，我该如何解决？它通过阻止按钮的一部分来影响功能，迫使人们从未阻止的部分调用该功能。例如；
我有一个 Logo ，当单击菜单时，字母 T 和 H 以及字母 animatie 彼此相距约 400px。当他们制作动画时，导航会出现:eas-in，但是当我再次单击汉堡菜单时，我希望导航以相同的动画
我正在尝试为“事件”CSS 类切换“禁用”，以使某些 SVG 的填充属性在单击时发生变化。 我能够正确更改第一个元素，但是当尝试对第二个和第三个 SVG 进行相同更改时，它会更改第一个 div 中第一
我有一个小的下拉列表，其中包含从 0 到 4 的数字(我可以添加更多)，例如数字 4 是 4 年的数据。如果我选择 4，我会得到 4 行日期选择器，供用户选择开始和结束日期。 它使用 for 循环，并
我有几个 powershell 函数，可以执行诸如检查程序是否打开然后关闭之类的操作。或者，如果程序关闭，该函数将打开它。这些函数被恰本地命名为Toggle-Something。我在 Windows
我是一名优秀的程序员,十分优秀！