Question

当我单击clickMe时，我试图将每个元素（一次生成的一个方形框，一次连续生成五个，带有id =“ square”标签）更改为随机颜色（）功能。但是，只有一个元素保持更改，而其他元素在创建后保持不变。我上过平方，但是这导致所有平方都改变了。

有人可以告诉我如何使用clickMe（）随机颜色生成器使每个正方形具有随机颜色。因此，如果我在单击按钮时有一个正方形，它将为该正方形创建随机颜色。如果我有两个正方形，它将同时为每个正方形生成不同的随机颜色。当我有三个正方形并且仅单击clickMe（）时，它将同时为每个正方形生成不同的随机颜色。对于我使用cloneMe（）按钮创建的正方形，此过程继续进行。

相反，我只能在克隆一个正方形后更改一个正方形，否则我将遇到另一个相反的问题，即同时同步更改所有正方形（使用.class元素）。

JQuery/JavaScript code

var myColors = ['red', 'purple', '#E84751', 'blue', 'orange', '#323643', '#97FF73', '#362EFF', '#FF6513'];

function clickMe(){
var randomize = Math.floor(Math.random()*myColors.length);
// var x = document.getElementById("square");

// var i;
// for (i = 0; i < x.length; i++) {
  // x[i].css("background-color", myColors[randomize]);
// }


     $("#square").css("background-color", myColors[randomize]);
}

 function cloneMe(){      
    $(document).ready(function(){

    // var i = 1;
    // while(i <= 5) {
        $("#square").clone().appendTo('.orange-square-container');  
        clickMe();
        // i++;

 });    
}

HTML Code

<!DOCTYPE html>
<html>
<head>
  <title>Random Colors!</title>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<script src="app.js"></script>
<!-- <section> -->

<div class="btn-alt-container">
  <a class="btn btn1-alt" onclick='clickMe()'>Push Me</a>
  <div class="btn btn2-alt" onclick='cloneMe()'>Make More</div>
</div>

<div class="container" 

></div>

<div class="orange-square-container">
  <div id="square"> 
         <div class="content">
           Hack Reactor's Awesome :)
         </div>
  </div>
</div>
<!-- </section> -->
</body>
</html>enter code here

What my code looks like on the browser

非常感谢您的回复。我希望有时在遇到困难时能在这里找到答案，但一直害怕在这里发布。

Answer 1

这就是您想要的：

var myColors = ['red', 'purple', '#E84751', 'blue', 'orange', '#323643', '#97FF73', '#362EFF', '#FF6513'];
function clickMe() {
  $(".square").each(function() {
    var randomize = Math.floor(Math.random() * myColors.length);
    $(this).css("background-color", myColors[randomize]);
  });
}

function cloneMe() {
  $(document).ready(function() {
    $(".square:first").clone().attr('class', 'square').appendTo('.orange-square-container');
    clickMe();
  });
}

在您的clickMe函数中，您忘了将$("#square")更改为$(".square")，而我已经将randomize移到了.each函数中。

演示

var myColors = ['red', 'purple', '#E84751', 'blue', 'orange', '#323643', '#97FF73', '#362EFF', '#FF6513'];

function clickMe() {
  $(".square").each(function() {
    var randomize = Math.floor(Math.random() * myColors.length);
    $(this).css("background-color", myColors[randomize]);
  });

}

function cloneMe() {
  $(document).ready(function() {

    // var i = 1;
    // while(i <= 5) {
    $(".square:first").clone().attr('class', 'square').appendTo('.orange-square-container');
    clickMe();
    // i++;

  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn-alt-container">
  <a class="btn btn1-alt" onclick='clickMe()'>Push Me</a>
  <div class="btn btn2-alt" onclick='cloneMe()'>Make More</div>
</div>

<div class="container"></div>

<div class="orange-square-container">
  <div class="square">
    <div class="content">
      Hack Reactor's Awesome :)
    </div>
  </div>
</div>

Answer 2

为正方形分配随机颜色的快速示例。请注意使用类而不是ID。

const colors = ["green", "blue", "red", "yellow", "orange", "pink", "purple"];
const button = document.getElementsByTagName("button")[0];

button.addEventListener("click", function() {
  /* Turn the HTMLCollection into an array using spread operator */
  const squares = [...document.getElementsByClassName("square")];
  /* Give each square a random background color */
    squares.map( square => {
      const randomize = Math.floor(Math.random()*colors.length);
      square.style.backgroundColor = colors[randomize]; 
    });
});

.container {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

.square {
  width: 20%;
}

<button>Click</button>
<div class="container">
  <div class="square">Blah blah</div>
  <div class="square">Blah blah</div>
  <div class="square">Blah blah</div>
  <div class="square">Blah blah</div>
  <div class="square">Blah blah</div>
  <div class="square">Blah blah</div>
  <div class="square">Blah blah</div>
  <div class="square">Blah blah</div>
  <div class="square">Blah blah</div>
</div>

Answer 3

请尝试以下代码

<style>
.orange-square-container {
  display: flex;
  flex-wrap: wrap;
  margin: auto;
  width: 760px;
}
#square {
  flex: 0 1 20%;
  height: 152px;
}
.btn-alt-container {
  display: flex;
  justify-content: center;
}
.btn-alt-container .btn {
  border: 2px solid purple;
  border-radius: 4px;
  padding: 10px;
  display: table;
  margin:20px 5px;
  cursor: pointer;
}
</style>

使用JQuery，HTML和CSS同时为每个框分别生成随机颜色

3 个答案: