javascript - 创建可选择的 li 项作为按钮

Question

我有一个用户界面，其中包含由列表项组成的按钮。我希望能够让它们可以单独选择，它们将控制另一个 div 的颜色。现在我已经对它们进行了布局，并且它们有一个 css 过渡，当鼠标悬停在上面时它们的比例会增加，但我希望在被选中时保持完全缩放。我该怎么做？

我尝试使用 focus 伪类，但它只适用于输入元素。我也尝试过 active 伪类，但我认为我在使用它们时遗漏了一些东西。

最后，如果我想让他们将另一个 div 的背景颜色更改为按钮的颜色，我该怎么办？

我还没有构建将受到影响的元素，我只是想使用一些形状像带有背景颜色的正方形的 div 来测试，但我在这一点上坚持为列表项提供事件状态。我可能缺少一些 JS 方面的内容。

这是我的代码: HTML:

<div id="colorSelection">
  <div class="base_color selector">
    <p class="sectionHeader">Base Color</p>
    <ul class="swatchSelector">
      <hr class="crossbar" width="90%">
      <li class="swatch one"></li>
      <li class="swatch two"></li>
      <li class="swatch three"></li>
      <li class="swatch four"></li>
      <li class="swatch five"></li>
      <li class="swatch six"></li>
      <li class="swatch seven"></li>
      <li class="swatch eight"></li>
    </ul>
  </div>
</div>

CSS:

/*reset*/
html, body, ul, li, p, a, img, hr{
  margin: 0px;
  padding: 0px;
  border: 0px;
  list-style-type: none;
  text-decoration: none;
}
#colorSelection {
    width: 320px;
    height: 720px;
    background-color:#d4d4d4;
    display: inline-block;
}
.selector{
    margin-bottom: 20px;
    padding: 10px;
    margin-left: 4px;
}
.sectionHeader {
    font-family: helvetica,arial,sans-serif;
    font-size: 20px;
    color:black;
    margin-bottom: 7px;
}
.swatch {
    width: 17px;
    height: 17px;
    border: 2px solid;
    border-radius: 50%;
    display: inline-block;
    margin-left: 12px;
    text-align: center;
    position: relative;
    transition: transform:2s ease-in-out;
    box-shadow: 0px 1px 5px rgba(0,0,0,0.5);
    cursor: pointer;
}
.swatch:hover{
    transform: scale(1.3);
}

.crossbar{
    border:1px white solid; 
    position: relative;
    right: 0px;
    top: 12px;
    box-shadow: 0px 1px 5px rgba(0,0,0,0.25);  
}

.one{
    margin-left: 0px;
    background-color:#ffdc01;
    border-color:white;
    transition: border .01s;
}
.one:hover, .one:active {
    border-color:#ffdc01;
}
.two{
    background-color:#f27245;
    border-color:white;
    transition: border .01s;
}
.two:hover, .two:active {
    border-color:#f27245;
}
.three {
    background-color:#db3844;
    border-color:white;
    transition: border .01s;
}
.three:hover, .three:active {
    border-color:#db3844;
}
.four {
    background-color:#754c90;
    border-color:white;
    transition: border .01s;
}
.four:hover, .four:active {
    border-color:#754c90;
}
.five{
    background-color:#005c9f;
    border-color:white;
    transition: border .01s;
}
.five:hover, .five:active {
    border-color:#005c9f;
}
.six{
    background-color:#343333;
    border-color:white;
    transition: border .01s;
}
.six:hover, .six:active {
    border-color:#343333;
}
.seven {
    background-color:#6a6c70;
    border-color:white;
    transition: border .01s;
}
.seven:hover, .seven:active {
    border-color:#6a6c70;
}
.eight {
    background-color:#e9eae8;
    border-color:white;
    transition: border .01s;
}

.eight:hover, .eight:active {
    border-color:#e9eae8;
}

https://jsfiddle.net/cf2zxf88/2/

Answer 1

I want then to stay fully scaled when selected. How would I do this?

使用 CSS 类 .scale { transfrom: scale(1.3) }可以被 JavaScript 与 el.classList.add() 一起使用和 el.classList.remove() .

Lastly, what would I do if I want them to change the background color of another div to the color of the button?

• 使用 document.querySelectorAll() 访问所有列表项
• 为每个列表项添加一个点击事件
• 使用 Window.getComputedStyle(el, null).getPropertyValue("background-color") 获取背景颜色

总计

(添加类 .scale 和 <div id="bg"></div> )

var colorButtons = document.querySelectorAll(".swatchSelector > li"),
  bg = document.getElementById("bg"),
  curr = 0;

for (var i = 0; i < colorButtons.length; i += 1) {
  (function(i) {
    colorButtons[i].addEventListener("click", function() {
      bg.style.backgroundColor = window.getComputedStyle(this, null).getPropertyValue("background-color");
      colorButtons[curr].classList.remove("scale");
      curr = i;
      colorButtons[curr].classList.add("scale");
    })
  })(i);
}

colorButtons[curr].classList.add("scale");
bg.style.backgroundColor = window.getComputedStyle(colorButtons[curr], null).getPropertyValue("background-color");

/*reset*/

html,
body,
ul,
li,
p,
a,
img,
hr {
  margin: 0px;
  padding: 0px;
  border: 0px;
  list-style-type: none;
  text-decoration: none;
}

#colorSelection,
#bg {
  vertical-align: top;
  width: 320px;
  height: 720px;
  background-color: #d4d4d4;
  display: inline-block;
}

.selector {
  margin-bottom: 20px;
  padding: 10px;
  margin-left: 4px;
}

.sectionHeader {
  font-family: helvetica, arial, sans-serif;
  font-size: 20px;
  color: black;
  margin-bottom: 7px;
}

.swatch {
  width: 17px;
  height: 17px;
  border: 2px solid;
  border-radius: 50%;
  display: inline-block;
  margin-left: 12px;
  text-align: center;
  position: relative;
  transition: transform:2s ease-in-out;
  box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.5);
  cursor: pointer;
}

.swatch:hover,
.scale {
  transform: scale(1.3);
}

.crossbar {
  border: 1px white solid;
  position: relative;
  right: 0px;
  top: 12px;
  box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.25);
}

.one {
  margin-left: 0px;
  background-color: #ffdc01;
  border-color: white;
  transition: border .01s;
}

.one:hover,
.one:active {
  border-color: #ffdc01;
}

.two {
  background-color: #f27245;
  border-color: white;
  transition: border .01s;
}

.two:hover,
.two:active {
  border-color: #f27245;
}

.three {
  background-color: #db3844;
  border-color: white;
  transition: border .01s;
}

.three:hover,
.three:active {
  border-color: #db3844;
}

.four {
  background-color: #754c90;
  border-color: white;
  transition: border .01s;
}

.four:hover,
.four:active {
  border-color: #754c90;
}

.five {
  background-color: #005c9f;
  border-color: white;
  transition: border .01s;
}

.five:hover,
.five:active {
  border-color: #005c9f;
}

.six {
  background-color: #343333;
  border-color: white;
  transition: border .01s;
}

.six:hover,
.six:active {
  border-color: #343333;
}

.seven {
  background-color: #6a6c70;
  border-color: white;
  transition: border .01s;
}

.seven:hover,
.seven:active {
  border-color: #6a6c70;
}

.eight {
  background-color: #e9eae8;
  border-color: white;
  transition: border .01s;
}

.eight:hover,
.eight:active {
  border-color: #e9eae8;
}

<div id="colorSelection">
  <div class="base_color selector">
    <p class="sectionHeader">Base Color</p>
    <ul class="swatchSelector">
      <hr class="crossbar" width="90%">
      <li class="swatch one scale"></li>
      <li class="swatch two"></li>
      <li class="swatch three"></li>
      <li class="swatch four"></li>
      <li class="swatch five"></li>
      <li class="swatch six"></li>
      <li class="swatch seven"></li>
      <li class="swatch eight"></li>
    </ul>
  </div>
</div>
<div id="bg"></div>