推入数组中的属性值答案

【问题标题】：Push Value of attribute in array推入数组中的属性值
【发布时间】：2019-03-04 06:01:06
【问题描述】：

$(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>

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

【问题讨论】：

一个文档中有多个相同ID的元素是无效的HTML。先解决这个问题。
好的，那么 jquery 呢
在使用jQuery时也是无效的。
还有变量名（例如，var Random = []; 按照惯例应该小写以避免混淆。

标签： javascript jquery html arrays

【解决方案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>

【讨论】：

【解决方案2】：

修复 ID。然后代替

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

使用

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

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

【讨论】：