时间戳

首页 > 解决方案 > 每次单击后更改容器中的所有 Div 颜色

javascript - 每次单击后更改容器中的所有 Div 颜色

问题描述

您好，我是 javascript 新手。每次单击时，我都试图更改容器中所有 Div 的颜色。

示例：在第一次单击时，我希望所有 div 都显示为红色。在第二次单击时，我希望所有 div 都显示为绿色！ 

<!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">
     <!-- Bootstrap CSS -->
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
       <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" type="text/css" rel="stylesheet">
        <!--jquery easing plugin-->
         <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
         <!--custom css---->
         <link href="css/phcoding.css" type="text/css" rel="stylesheet">
          <title>cliciks</title>
          <style>
          </style>
           </head>
           <body>
<div id="container" onclick="myFunction();">
<div id="div1">This is div 1</p>
<div id="div2">This is div 2</p>
<div id="div3">This is div 3</p>
</div>
<script>
function  myFunction(){
    let x = document.getElementById("container");
    y=x.children;
    for(let i = 0; i< y.length;i++){
        y[i].style.color="red";
        y[i].style.color="green";
    }
}
myFunction();
</script>
          </body>
         </html>

标签： javascriptjqueryhtmlcssbootstrap-4

解决方案

尝试：

$(".container").on("click",function(){
     if($(this).css("color") == "red"){
           $(this).css("color","green");
     }else{
           $(this).css("color","red");
     }
}

推荐阅读