jqueryでランダムなCSSスタイルを与える

Question

私はこのコードを使用して私のdivタグランダムバックカラーをそれぞれ与えたいと思います。しかし、すべてのdivタグを1つの背景色に設定します。私はそれらを違うものにしたい。それは、正しく動作するために使用されるが、何かが起こった、それが今は動作しません。むしろ、外よりも、ループ内で、すなわち、あなたはを通してあなたのループのランダム変数を変更するたびに必要

var downcolors = ["#ff7043", "#8d6e63", "#ffa726", "#ffca28", "#66bb6a", "#9ccc65", "#d4e157", "#29b6f6", "#26c6da", "#26a69a", "#4db6ac", "#4dd0e1", "#4fc3f7", "#009688", "#7e57c2", "#5c6bc0", "#42a5f5", "#ef5350", "#ec407a", "#ab47bc"]; 
 
var topcolors = ["#d84315", "#37474f", "#455a64", "#d84315", "#bf360c", "#3e2723", "#4e342e", "#5d4037", "#212121", "#424242", "#1b5e20", "#33691e", "#827717", "#01579b", "#006064", "#004d40", "#6200ea", "#311b92", "#1a237e", "#0d47a1", "#4527a0", "#283593", "#b71c1c", "#880e4f", "#4a148c"]; 
 
var downrand = Math.floor(Math.random() * downcolors.length); 
 
var toprand = Math.floor(Math.random() * topcolors.length); 
 

 
$.each($(".tg-item-inner"), function(idx, elem) { 
 
    $(elem).css({ 
 
    'background': 'linear-gradient(to top, ' + downcolors[downrand] + ' 50%, ' + topcolors[toprand] + ' 50%)' 
 
    }); 
 
});

Answer 1

を、 ：

var downcolors = ["#ff7043", "#8d6e63", "#ffa726", "#ffca28", "#66bb6a", "#9ccc65", "#d4e157", "#29b6f6", "#26c6da", "#26a69a", "#4db6ac", "#4dd0e1", "#4fc3f7", "#009688", "#7e57c2", "#5c6bc0", "#42a5f5", "#ef5350", "#ec407a", "#ab47bc"]; 
 
var topcolors = ["#d84315", "#37474f", "#455a64", "#d84315", "#bf360c", "#3e2723", "#4e342e", "#5d4037", "#212121", "#424242", "#1b5e20", "#33691e", "#827717", "#01579b", "#006064", "#004d40", "#6200ea", "#311b92", "#1a237e", "#0d47a1", "#4527a0", "#283593", "#b71c1c", "#880e4f", "#4a148c"]; 
 

 
$.each($("div"), function(idx, elem) { 
 
    // move random variables to inside the loop 
 
    var downrand = Math.floor(Math.random() * downcolors.length); 
 
    var toprand = Math.floor(Math.random() * topcolors.length); 
 
    $(elem).css({ 
 
    'background': 'linear-gradient(to top, ' + downcolors[downrand] + ' 50%, ' + topcolors[toprand] + ' 50%)' 
 
    }); 
 
});

div { 
 
    width: 100px; 
 
    height: 100px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div></div> 
 
<div></div> 
 
<div></div> 
 
<div></div> 
 
<div></div> 
 
<div></div> 
 
<div></div>