單擊按鈕時如何更改css屬性？-有解無憂

我希望當我點擊它們中的每一個時，彈出帶有類顏色的跨度元素，但僅限于該按鈕。

[![在此處輸入影像描述][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';
}};

uj5u.com熱心網友回復：

你可以簡單地添加這一行

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

uj5u.com熱心網友回復：

您不能使用相同的ID時間超過1元。

我用一個新的類名替換了按鈕的 ID fruit-btn。
然后我在 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 樣式。

轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/398094.html

標籤：javascript 查询 css 点击

上一篇：HTML和CSS如何將我的徽標移動到左側