时间戳

首页 > 解决方案 > 每次单击时更改按钮颜色 [Javascript]

javascript - 每次单击时更改按钮颜色 [Javascript]

问题描述

我尝试编写一个简单的程序，每次单击时更改容器中 div 的颜色。第一次单击时，它只会将颜色更改为 Div 1、Div 3、Div 5。第二次单击时，反之亦然，

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

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>clciks</title>
</head>

<body>
  <div id="container">
    <div>This is Div 1</div>
    <div>This is Div 2</div>
    <div>This is Div 3</div>
    <div>This is Div 4</div>
    <div>This is Div 5</div>
  </div>
  <script>
    let x = document.getElementById("container");
    let y = x.children;
    let click = 0;

    function myFunction() {
      for (let i = 0; i < y.length; i++) {
        y[i].onclick = function() {
          if (click == 0) {
            y[i].style.color = "blue";
            click = 1;
          } else {
            y[i].style.color = "red";
            click = 0;
          }
        }
      }
    }
    myFunction();
  </script>
</body>

</html>

标签： javascripthtml

解决方案

他们共享相同的click变量。
只要把你的let click = 0;里面的for每个div

@GoodnessGoodness Chi：
我们可以对您的答案进行一些修改吗？现在我不想在点击 div 返回时将所有DIVS
的颜色更改为黄色nodeType == 1

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

    <head>
      <!-- Required meta tags -->
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
      <title>clciks</title>
    </head>

    <body>
      <div id="container">
        <div>This is Div 1</div>
        <div>This is Div 2</div>
        <div>This is Div 3</div>
        <div>This is Div 4</div>
        <div>This is Div 5</div>
      </div>
      <script>
        let x = document.getElementById("container");
        let y = x.children;
        

        function myFunction() {
          for (let i = 0; i < y.length; i++) {
            let click = 0;
            let z = x.childNodes;
            y[i].onclick = function() {
              if (click == 0) {
                y[i].style.color = "blue";
                click = 1;
              } else {
                y[i].style.color = "red";
                click = 0;
              }
//now change the color of DIVS to yellow
            if(z[i].nodeType == 1)
{
y[i].style.color = "yellow";
}
            }
          }
        }
        myFunction();
      </script>
    </body>

    </html>

推荐阅读