Question

$(document).ready(function() {
  function randomColor() {
    return 'rgb(' +
      Math.round(Math.random() * 255) + ', ' +
      Math.round(Math.random() * 255) + ', ' +
      Math.round(Math.random() * 255) + ')'
  }

  $('.Showcolor #button').each(function(i) {
    $(this).css('background-color', randomColor());
  })
  var Random = [];
  var color = $(".Showcolor #button").css("background-color");
  for (i = 0; i < button.length; i++) {
    Random.push(color);
  }
  console.log(Random);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>

<head>
  <title>captcha</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <h1>Click on circle matching right circle</h1>
  <div class="box">
    <div class="Showcolor">
      <button class="Black"></button>
      <button class="Blue"></button>
      <button class="Orange"></button>

      <button class="Pink"></button>
      <button class="Purple"></button>
      <button class="Skyblue"></button>

      <button class="Brown"></button>

    </div>
    <div="match">
      <button class="Random"></button>
  </div>
  <input type="text" name="color" class="color" disabled>
  </div>
  <script src="jquery.3.js"></script>
  <script src="file.js"></script>
  </table>
</body>

</html>

我正在尝试将为每个按钮生成的颜色存储到一个颜色数组（随机）中，以便另一个按钮（类名= Random）可以从该特定数组中选择一种颜色。您能帮我找到解决办法吗？

Answer 1

首先，id属性在同一文档中必须是唯一的，因此将重复的属性替换为通用类，例如：

<button class="button Black">Black</button>
<button class="button Blue">Blue</button>
<button class="button Orange">Orange</button>

您可以使用map遍历它们并将颜色推入数组：

$(document).ready(function() {
  var buttons = $('.Showcolor .button');

  var Random = buttons.map(function(i) {
    var generated_color = randomColor();

    $(this).css('background-color', generated_color);

    return generated_color;
  }).get();

  $('.random').on('click', function() {
    $('.random').css('background-color', Random[Math.floor(Math.random() * Random.length)]);
  })
});

function randomColor() {
  return 'rgb(' +
    Math.round(Math.random() * 255) + ', ' +
    Math.round(Math.random() * 255) + ', ' +
    Math.round(Math.random() * 255) + ')'
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<h1>Click on circle matching right circle</h1>
<div class="box">
  <div class="Showcolor">
    <button class="button Black">Black</button>
    <button class="button Blue">Blue</button>
    <button class="button Orange">Orange</button>

    <button class="button Pink">Pink</button>
    <button class="button Purple">Purple</button>
    <button class="button Skyblue">Skyblue</button>

    <button class="button Brown">Brown</button>

  </div>
  <br>
  <div id="match">
    <button class="random">Random</button>
  </div>
</div>

Answer 2

修复ID。然后代替

$('.Showcolor #button').each(function(i) {
         $(this).css('background-color', randomColor());
      })

使用

$('.Showcolor > button').each(function(i) {
         $(this).css('background-color', randomColor());
      })

选择<button> Showcolor下的所有<div>元素

在数组中推送属性值

2 个答案: