$(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 属性在同一个文档中必须是唯一的，所以用通用类替换重复的属性，例如:
<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>关于javascript - 推送数组中属性的值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52551933/