javascript - 努力从单击的 div 中获取值

标签 javascript html css

这里是 JS 菜鸟。在过去的几周里，我一直在阅读 Mozilla 网站上的 JavaScript 指南，并在 codewars 上完成一些基本的编程挑战，现在我决定开始我的第一个简单元素。我基本上是在制作一个非常简单的颜色选择器，您可以在其中选择一个红色值、一个绿色值和一个蓝色值，然后将它们混合在一起，产生的颜色将进入底部的正方形。我已经完成了 HTML/CSS(虽然做得不是很好)，这就是它的样子:http://imgur.com/LOG6Yvr

我正在尝试弄清楚我应该如何使用 JavaScript 来执行此操作。我的一个想法是为每个框添加一个 onclick 属性，并将其附加到一个函数，该函数会更改所单击对象的边框，从而给人一种被选中的错觉。我设法做到了，但是有几个问题:

  1. 我不太确定如何在每一行中一次只允许选择一个框(类似于单选按钮)。
  2. 我不确定如何提取框的值(即，如果在红色行上单击第一个框，我希望能够获得 r 的值 0)。

一旦我弄明白了这一点，我相信将单击的每个框的值组合起来并使用一个函数将底部框的背景颜色更改为 rgb 值的组合会很简单。 任何帮助将不胜感激。以防万一它会有所帮助，这是我到目前为止所做的代码:

HTML:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>RGB Selector</title>
  <link rel="stylesheet" href="css/style.css">
  <link rel="shortcut icon" href="img/favicon.ico">
</head>

<body>
  <main>
    <div id="red">
      <div class="square sq0"><span>0</span></div>
      <div class="square sq1"><span>1</span></div>
      <div class="square sq2"><span>2</span></div>
      <div class="square sq3"><span>3</span></div>
      <div class="square sq4"><span>4</span></div>
      <div class="square sq5"><span>5</span></div>
      <div class="square sq6"><span>6</span></div>
      <div class="square sq7"><span>7</span></div>
      <div class="square sq8"><span>8</span></div>
      <div class="square sq9"><span>9</span></div>
      <div class="square sqA"><span>A</span></div>
      <div class="square sqB"><span>B</span></div>
      <div class="square sqC"><span>C</span></div>
      <div class="square sqD"><span>D</span></div>
      <div class="square sqE"><span>E</span></div>
      <div class="square sqF"><span>F</span></div>
    </div>
    <div id="green">
      <div class="square sq0"><span>0</span></div>
      <div class="square sq1"><span>1</span></div>
      <div class="square sq2"><span>2</span></div>
      <div class="square sq3"><span>3</span></div>
      <div class="square sq4"><span>4</span></div>
      <div class="square sq5"><span>5</span></div>
      <div class="square sq6"><span>6</span></div>
      <div class="square sq7"><span>7</span></div>
      <div class="square sq8"><span>8</span></div>
      <div class="square sq9"><span>9</span></div>
      <div class="square sqA"><span>A</span></div>
      <div class="square sqB"><span>B</span></div>
      <div class="square sqC"><span>C</span></div>
      <div class="square sqD"><span>D</span></div>
      <div class="square sqE"><span>E</span></div>
      <div class="square sqF"><span>F</span></div>
    </div>
    <div id="blue">
      <div class="square sq0"><span>0</span></div>
      <div class="square sq1"><span>1</span></div>
      <div class="square sq2"><span>2</span></div>
      <div class="square sq3"><span>3</span></div>
      <div class="square sq4"><span>4</span></div>
      <div class="square sq5"><span>5</span></div>
      <div class="square sq6"><span>6</span></div>
      <div class="square sq7"><span>7</span></div>
      <div class="square sq8"><span>8</span></div>
      <div class="square sq9"><span>9</span></div>
      <div class="square sqA"><span>A</span></div>
      <div class="square sqB"><span>B</span></div>
      <div class="square sqC"><span>C</span></div>
      <div class="square sqD"><span>D</span></div>
      <div class="square sqE"><span>E</span></div>
      <div class="square sqF"><span>F</span></div>
    </div>
    <div id="mixedColor"></div>
  </main>

  <script src="js/rgb.js"></script>
</body>

</html>

CSS:

* {
  color: #f0f0f0;
  font-family: 'Brandon Grotesque';
}

body {
  background: #222;
}

main {
  position: absolute;
  top: 50%;
  margin-top: -368px;
  left: 50%;
  margin-left: -536px;
}

.square {
  height: 65px;
  width: 65px;
  border: 1px solid #333;
  border-radius: .15em;
  margin-top: 100px;
  text-align: center;
  opacity: .9;
  transition: border .1s;
}

#red > .square {
  float: left;
  background: #f00;
}

#green > .square {
  float: left;
  background: #0f0;
}

#blue > .square {
  float: left;
  background: #00f;
}

.sq0 {
  clear: left;
  /*opacity: .1;*/
}

.square span {
  position: relative;
  top: -25px;
}

#mixedColor {
  width: 100px;
  height: 100px;
  background: #fff;
  float: left;
  position: absolute;
  left: 50%;
  margin-left: -50px;
  top: 50%;
  margin-top: 308px;
  border: 1px solid #333;
}

#red .sq0 { background: #000; }
#red .sq1 { background: #100; }
#red .sq2 { background: #200; }
#red .sq3 { background: #300; }
#red .sq4 { background: #400; }
#red .sq5 { background: #500; }
#red .sq6 { background: #600; }
#red .sq7 { background: #700; }
#red .sq8 { background: #800; }
#red .sq9 { background: #900; }
#red .sqA { background: #A00; }
#red .sqB { background: #B00; }
#red .sqC { background: #C00; }
#red .sqD { background: #D00; }
#red .sqE { background: #E00; }
#red .sqF { background: #F00; }

#green .sq0 { background: #000; }
#green .sq1 { background: #010; }
#green .sq2 { background: #020; }
#green .sq3 { background: #030; }
#green .sq4 { background: #040; }
#green .sq5 { background: #050; }
#green .sq6 { background: #060; }
#green .sq7 { background: #070; }
#green .sq8 { background: #080; }
#green .sq9 { background: #090; }
#green .sqA { background: #0A0; }
#green .sqB { background: #0B0; }
#green .sqC { background: #0C0; }
#green .sqD { background: #0D0; }
#green .sqE { background: #0E0; }
#green .sqF { background: #0F0; }

#blue .sq0 { background: #000; }
#blue .sq1 { background: #001; }
#blue .sq2 { background: #002; }
#blue .sq3 { background: #003; }
#blue .sq4 { background: #004; }
#blue .sq5 { background: #005; }
#blue .sq6 { background: #006; }
#blue .sq7 { background: #007; }
#blue .sq8 { background: #008; }
#blue .sq9 { background: #009; }
#blue .sqA { background: #00A; }
#blue .sqB { background: #00B; }
#blue .sqC { background: #00C; }
#blue .sqD { background: #00D; }
#blue .sqE { background: #00E; }
#blue .sqF { background: #00F; }

.square:hover {
  border: 1px solid #fff;
  cursor: pointer;
}

最佳答案 

(function(){
    var lastSelection = {};  //hold last checked elem
    document.body.addEventListener("click", function (event) {  //listen for click on the body so we do not have to add click to every element
        var elem = event.target;  //get the element that was clicked
        var box = null;  //if we find a square we put it in this variable
        if (elem.classList.contains("square")) {  //see if it is a square
            box = elem;  //set the square
        } else if (elem.parentElement.classList.contains("square")) {  //see if it was a child of the square
           box = elem.parentNode; //set the square
        }
        if (box) {  //if we have have a selection
          
            var row = box.parentElement.id;  //get the row it is clicked in 
          
            if (lastSelection[row]) {  //if we have a previous selection for that row, remove it
                lastSelection[row].classList.remove("selected");  
            }
            lastSelection[row] = box;  //update the selection for the row
            
            box.classList.add("selected");  //make the selection

            getColors();
        }
    });

    
    function getColors () {
        for(var row in lastSelection) {
            var selectedElem = lastSelection[row];
            if (selectedElem) {
                console.log(row, getComputedStyle(selectedElem).getPropertyValue("background-color"));
            }
        }
    }

}());
* {
  color: #f0f0f0;
  font-family: 'Brandon Grotesque';
}

body {
  background: #222;
}

main {
  position: absolute;
  top: 50%;
  margin-top: -368px;
  left: 50%;
  margin-left: -536px;
}

.square {
  height: 65px;
  width: 65px;
  border: 1px solid #333;
  border-radius: .15em;
  margin-top: 100px;
  text-align: center;
  opacity: .9;
  transition: border .1s;
}

#red > .square {
  float: left;
  background: #f00;
}

#green > .square {
  float: left;
  background: #0f0;
}

#blue > .square {
  float: left;
  background: #00f;
}

.sq0 {
  clear: left;
  /*opacity: .1;*/
}

.square span {
  position: relative;
  top: -25px;
}

#mixedColor {
  width: 100px;
  height: 100px;
  background: #fff;
  float: left;
  position: absolute;
  left: 50%;
  margin-left: -50px;
  top: 50%;
  margin-top: 308px;
  border: 1px solid #333;
}

#red .sq0 { background: #000; }
#red .sq1 { background: #100; }
#red .sq2 { background: #200; }
#red .sq3 { background: #300; }
#red .sq4 { background: #400; }
#red .sq5 { background: #500; }
#red .sq6 { background: #600; }
#red .sq7 { background: #700; }
#red .sq8 { background: #800; }
#red .sq9 { background: #900; }
#red .sqA { background: #A00; }
#red .sqB { background: #B00; }
#red .sqC { background: #C00; }
#red .sqD { background: #D00; }
#red .sqE { background: #E00; }
#red .sqF { background: #F00; }

#green .sq0 { background: #000; }
#green .sq1 { background: #010; }
#green .sq2 { background: #020; }
#green .sq3 { background: #030; }
#green .sq4 { background: #040; }
#green .sq5 { background: #050; }
#green .sq6 { background: #060; }
#green .sq7 { background: #070; }
#green .sq8 { background: #080; }
#green .sq9 { background: #090; }
#green .sqA { background: #0A0; }
#green .sqB { background: #0B0; }
#green .sqC { background: #0C0; }
#green .sqD { background: #0D0; }
#green .sqE { background: #0E0; }
#green .sqF { background: #0F0; }

#blue .sq0 { background: #000; }
#blue .sq1 { background: #001; }
#blue .sq2 { background: #002; }
#blue .sq3 { background: #003; }
#blue .sq4 { background: #004; }
#blue .sq5 { background: #005; }
#blue .sq6 { background: #006; }
#blue .sq7 { background: #007; }
#blue .sq8 { background: #008; }
#blue .sq9 { background: #009; }
#blue .sqA { background: #00A; }
#blue .sqB { background: #00B; }
#blue .sqC { background: #00C; }
#blue .sqD { background: #00D; }
#blue .sqE { background: #00E; }
#blue .sqF { background: #00F; }

.square:hover {
  border: 1px solid #fff;
  cursor: pointer;
}

.square.selected,
.square.selected:hover {
   border: 1px solid teal;  
}
<div id="red">
      <div class="square sq0"><span>0</span></div>
      <div class="square sq1"><span>1</span></div>
      <div class="square sq2"><span>2</span></div>
      <div class="square sq3"><span>3</span></div>
      <div class="square sq4"><span>4</span></div>
      <div class="square sq5"><span>5</span></div>
      <div class="square sq6"><span>6</span></div>
      <div class="square sq7"><span>7</span></div>
      <div class="square sq8"><span>8</span></div>
      <div class="square sq9"><span>9</span></div>
      <div class="square sqA"><span>A</span></div>
      <div class="square sqB"><span>B</span></div>
      <div class="square sqC"><span>C</span></div>
      <div class="square sqD"><span>D</span></div>
      <div class="square sqE"><span>E</span></div>
      <div class="square sqF"><span>F</span></div>
    </div>
    <div id="green">
      <div class="square sq0"><span>0</span></div>
      <div class="square sq1"><span>1</span></div>
      <div class="square sq2"><span>2</span></div>
      <div class="square sq3"><span>3</span></div>
      <div class="square sq4"><span>4</span></div>
      <div class="square sq5"><span>5</span></div>
      <div class="square sq6"><span>6</span></div>
      <div class="square sq7"><span>7</span></div>
      <div class="square sq8"><span>8</span></div>
      <div class="square sq9"><span>9</span></div>
      <div class="square sqA"><span>A</span></div>
      <div class="square sqB"><span>B</span></div>
      <div class="square sqC"><span>C</span></div>
      <div class="square sqD"><span>D</span></div>
      <div class="square sqE"><span>E</span></div>
      <div class="square sqF"><span>F</span></div>
    </div>
    <div id="blue">
      <div class="square sq0"><span>0</span></div>
      <div class="square sq1"><span>1</span></div>
      <div class="square sq2"><span>2</span></div>
      <div class="square sq3"><span>3</span></div>
      <div class="square sq4"><span>4</span></div>
      <div class="square sq5"><span>5</span></div>
      <div class="square sq6"><span>6</span></div>
      <div class="square sq7"><span>7</span></div>
      <div class="square sq8"><span>8</span></div>
      <div class="square sq9"><span>9</span></div>
      <div class="square sqA"><span>A</span></div>
      <div class="square sqB"><span>B</span></div>
      <div class="square sqC"><span>C</span></div>
      <div class="square sqD"><span>D</span></div>
      <div class="square sqE"><span>E</span></div>
      <div class="square sqF"><span>F</span></div>
    </div>
    <div id="mixedColor"></div>
  </main>

关于javascript - 努力从单击的 div 中获取值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27851930/

上一篇：css - 如何将字符串传递给 mixin 并生成动态变量以在 LESSCSS 中输出颜色？

下一篇：html - CSS/HTML 似乎无法使菜单标题居中

相关文章：

javascript - Java <String ,"Some Class"> 的巨大 map

javascript - 当蜂窝网络不可用时，geolocation.getCurrentPosition 不起作用

java - 如何在java程序中编写的html代码中从onclick调用java方法？

css -::-moz-选择可能的错误

css - Chrome 中导航栏的错误(UI-Bootstrap)

html - 2 个流体 block 元素并排共享空间

带有未从类导出参数的 JavaScriptCore 方法

javascript - 为什么在这个简单的例子中 `this.refs` 会返回 undefined？

javascript - jQuery 按条件删除元素

javascript - 如何向本地存储 HTML5 添加多个文本

©2024 IT工具网  联系我们