单击按钮时如何更改css属性？答案

【问题标题】：How to change css property when you click on button?单击按钮时如何更改css属性？
【发布时间】：2021-12-30 09:11:10
【问题描述】：

当我单击它们中的每一个时，我希望弹出具有类颜色的 span 元素，但仅适用于该按钮。

[![在此处输入图片描述][1]][1]

只有当我单击其中一个以将可见性更改为在所有具有类颜色的元素上可见时才实现。

我的代码：https://jsbin.com/govowakasa/edit?js

document.getElementById("btn-apple").addEventListener("click", function(e) {
  showColor()
});

function showColor() {
  const colors = document.getElementsByClassName("color");
  for (let i=0; i<colors.length; i++) {
    colors[i].style.visibility = 'visible';
}};

【问题讨论】：

也显示您的 html（可能还有 css）；类名color的功能不明确
您可以将 span 的索引作为参数传递给 showColor 函数
stackoverflow.com/questions/14319274/…
jsbin.com/govowakasa/edit?js我的代码

标签： javascript jquery css click

【解决方案1】：

你可以简单地添加这一行

 fruits[i].style.backgroundColor = 'red'

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。

【解决方案2】：

您不能对超过 1 个元素使用相同的 ID。

我用新的类名 fruit-btn 替换了按钮的 ID。
然后我在 JS 中创建了一个包含按钮和颜色范围的数组。
然后我遍历每个按钮以添加一个EventListener。

如果我添加了另一个循环来隐藏每个颜色范围，然后使i 范围可见。不需要函数。

const fruit_btn = document.getElementsByClassName("fruit-btn");
const color_spans = document.getElementsByClassName("color");

for (let i = 0; i < fruit_btn.length; i++) {
  fruit_btn[i].addEventListener("click", function(e) {
    for (let i = 0; i < fruit_btn.length; i++) {
      color_spans[i].style.visibility = "hidden";
    }
    color_spans[i].style.visibility = "visible";
  });
}

body {
  font-size: 2rem;
}

li {
  margin: 20px;
  list-style: none;
}

button i {
  cursor: pointer;
  font-size: 3rem;
}

.color {
  margin: 10px;
  border: 1px solid black;
  background-color: blanchedalmond;
  display: inline-block;
  padding: 10px;
  visibility: hidden;
}

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Fruits</title>
  <link rel="stylesheet" href="list.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" integrity="sha512-0S+nbAYis87iX26mmj/+fWt1MmaKCv80H+Mbo+Ne7ES4I6rxswpfnC6PxmLiw33Ywj2ghbtTw0FkLbMWqh4F7Q==" crossorigin="anonymous" referrerpolicy="no-referrer"
  />
</head>

<body>
  <p>
    FRUITS
  </p>
  <ul>
    <li class="items">
      <button class="fruit-btn"><i class="fas fa-apple-alt"></i></button>
      <span class="color">red and yellow</span>
    </li>
    <li class="items">
      <button class="fruit-btn"><i class="fas fa-carrot"></i></button>
      <span class="color">orange</span>
    </li>
    <li class="items">
      <button class="fruit-btn"><i class="fas fa-lemon"></i></button>
      <span class="color">yellow</span>
    </li>
    <li class="items">
      <button class="fruit-btn"><i class="fas fa-pepper-hot"></i></button>
      <span class="color">red and green</span>
    </li>
  </ul>
  <script src="/week-4/index.js"></script>
</body>

</html>

我建议添加/删除一个类，而不是直接添加/删除 CSS 样式。

【讨论】：

谢谢，是的，我完全知道，这是我发送的旧 jsfidle，之后我意识到我更改了 4 个不同的 ID（btn-apple、btn-carrot、btn-lemon、btn-胡椒），我为他们所有人做了这个 document.getElementById("btn-apple").addEventListener("click", function(e) { showColor() });然后是功能，但仍然无法全部获得。事件中的另一个循环就是答案。非常感谢