个人中心
gpt4 book ai didi

javascript - 多个 div 的 classList.toggle()

转载 作者：行者123 更新时间：2023-12-04 01:44:06 26 4
gpt4 key购买 nike

我有 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/

26 4 0
文章推荐： tfs - 如何从本地 TFS2015 获取 PAT
文章推荐： oop - python 的 __repr__ 和 __str__ 的 Racket 等价物？
文章推荐： c# - 在 asp.net core : Circular dependency problem 的 dbcontext 中播种用户和角色
文章推荐： r - 使用 R 的传单包添加弯曲的飞行路径
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com