2015-09-13 2 views
2

Впервые в мире развития, пожалуйста, будьте терпеливы, если мне не хватает xp. Мне нужно поместить 5 конкретных цветов (я предполагаю использовать массив и функцию тасования) в моих 5 кругах случайным образом.Перемешивание цветов в массиве до 5 divs jQuery

HTML

<div id="colorBox"> 
    <div class="circle"></div>   
    <div class="circle"></div> 
    <div class="circle"></div> 
    <div class="circle"></div>   
    <div class="circle"></div>   
</div> 

JS

function shuffle(array) { 
    var currentIndex = array.length, 
     temporaryValue, randomIndex; 


    while (0 !== currentIndex) { 


     randomIndex = Math.floor(Math.random() * currentIndex); 
     currentIndex -= 1; 
     temporaryValue = array[currentIndex]; 
     array[currentIndex] = array[randomIndex]; 
     array[randomIndex] = temporaryValue; 
    } 

    return array; 
} 

var colors = ['red', 'blue', 'green', 'black', 'pink']; 
shuffle(colors); 

$(".circle").css("background", colors); 

Я просто не понимаю, что случилось с моим кодом. пожалуйста помоги!

ответ

0

Вы устанавливаете массив цветов, но для фона требуется одно значение, а не массив , и вам нужно установить его отдельно.

Попробуйте как этот

var colors = ['red', 'blue', 'green', 'black', 'pink']; 
shuffle(colors); 
var i = 0; 
$(".circle").each(function() { 
    $(this).css("background", colors[i++]); 

}); 
+0

Я предполагаю, что я забыл упомянуть, я только хочу один из каждого цвета. Таким образом, лучший пример не работает. Спасибо за вашу помощь – ReptarNation

+0

@ReptarNation ok, я удалил это, но вам нужно .each использовать значение –

+0

О, хорошо, я понимаю, что он пытался дать цвета в целом вместо отдельного div. Спасибо, что так долго работали над этим. – ReptarNation

0

Давайте думать об этом ни на секунду. Скажем, ваш первый randomIndex происходит от array.length от . Результат: randomIndex равен . После уменьшения currentIndex на значение 1, следующий размер выбора находится вне . Что произойдет, если вы снова получите randomIndex от ? Вы перезаписали свой первый стиль CSS. То, что вы должны делать это удаление цвета из массива после использования его:

function shuffle(array) { 

    var randomIndex; 
    var currentIndex = 0; 

    while (0 !== array.length) { 

    randomIndex = Math.floor(Math.random() * array.length); 
    var arrayColor = array[randomIndex]; 

    if (randomIndex > -1) //this cond. statement will remove the array element 
    { 
     array.splice(randomIndex,1);     
    } 

    $(".circle").eq(currentIndex).css("background", arrayColor); // Set each circle starting at element zero with the "eq" method 
    currentIndex++; 
} 

} 

var colors = ['red', 'blue', 'green', 'black', 'pink']; 
shuffle(colors); 

См JSFiddle.

В конечном счете, то, что я сделал, используется в комбинации array.splice, а также включает стилизацию CSS в JQuery WITHIN. Это решает проблему, выделенную Аником. Если вы планируете устанавливать стиль каждого круга, вам нужно сделать это в рамках цикла/метода.

0

Это будет делать:

Javavscript

var colors = shuffle(['red', 'blue', 'green', 'black', 'pink']); 
$(".circle").each(function(index) { 
    $(this).css("background", colors[index]); 
}); 

function shuffle(arr) { 
    for (i = arr.length - 1; i > 0; i--) { 
     var j = Math.floor(Math.random() * (i + 1)); 
     var temp = arr[i]; 
     arr[i] = arr[j]; 
     arr[j] = temp; 
    } 
    return arr; 
} 

HTML

<div id="colorBox"> 
    <div class="circle">&nbsp;</div> 
    <div class="circle">&nbsp;</div> 
    <div class="circle">&nbsp;</div> 
    <div class="circle">&nbsp;</div> 
    <div class="circle">&nbsp;</div> 
</div> 
0

Попробуйте с использованием .css(propertyName, function), Array.prototype.slice(), Array.prototype.splice()

var colors = ["red", "blue", "green", "black", "pink"], c; 
 

 
$(".circle").css("backgroundColor", function(index, value) { 
 
    // if `index` : `0` define `c` as copy of `colors` array 
 
    if (!index) c = colors.slice(); 
 
    return c.splice(Math.floor(Math.random() * c.length), 1) 
 
});
.circle { 
 
    width: 100px; 
 
    height: 100px; 
 
    border-radius: 50px; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> 
 
</script> 
 
<div id="colorBox"> 
 
    <div class="circle"></div> 
 
    <div class="circle"></div> 
 
    <div class="circle"></div> 
 
    <div class="circle"></div> 
 
    <div class="circle"></div> 
 
</div>