用3種隨機盒陰影顏色

Question

案例順序框：

我使用貓頭鷹傳送帶以最大10個縮略圖的框（將跨越與瀏覽器手動滾動限定寬度各面板）。不過，我在Google上搜索過「如何使用jQuery創建3個隨機顏色」，並且似乎有些結果對我來說很難整合。

代碼圖1

BoxShadow = function() { 
    var hfiColors = ['#00A9E0', '#E82425', '#EFB12A']; 
    var colors = hfiColors.slice(0); 

    $('.program-gallery .item').each(function(i){ 
    var i = i + 1; 
    var color = Math.floor(Math.random() * colors.length); 

    $(this).css('box-shadow', '0 0 0 5px' + colors[color]); 
    colors = colors.slice(0,color-1).concat(colors.slice(color+1,colors.length-1)); 
    }); 

    $.each(colors, function(i, v){ 
    $('.item' + (+i + 1)).html(colors[i]); 
    }); 
} 
$(document).ready(BoxShadow); 

這是代碼我有，到目前爲止，它隨機產生的box-shadow我的縮略圖，但有些箱陰影，我的縮略圖無法正確顯示。誠實地說，我現在對代碼結構感到困惑。

碼圖2

<div class="program-gallery"> 
    <div class="item"> 
    <figure class="uk-overlay uk-overlay-hover"> 
     <img src="https://placem.at/things?w=1600&h=980&txt=0&random=201" alt=""> 
     <figcaption class="uk-overlay-panel uk-overlay-background uk-overlay-fade uk-flex uk-flex-bottom"> 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit consequuntur. 
     </figcaption> 
     <a class="uk-position-cover"></a> 
    </figure> 
    </div> 
    <div class="item"> 
    <figure class="uk-overlay uk-overlay-hover"> 
     <img src="https://placem.at/things?w=1600&h=980&txt=0&random=202" alt=""> 
     <figcaption class="uk-overlay-panel uk-overlay-background uk-overlay-fade uk-flex uk-flex-bottom"> 
     Suscipit blanditiis quos aspernatur minus optio beatae consectetur quidem accusantium rerum ab sed nisi. 
     </figcaption> 
     <a class="uk-position-cover"></a> 
    </figure> 
    </div> 
    <div class="item"> 
    <figure class="uk-overlay uk-overlay-hover"> 
     <img src="https://placem.at/things?w=1600&h=980&txt=0&random=203" alt=""> 
     <figcaption class="uk-overlay-panel uk-overlay-background uk-overlay-fade uk-flex uk-flex-bottom"> 
     Culpa consequuntur necessitatibus laboriosam, quas quos odit non unde consequatur fugit rerum incidunt. 
     </figcaption> 
     <a class="uk-position-cover"></a> 
    </figure> 
    </div> 
</div> 

要取得哪些成果：

我想創建的3個隨機的box-shadow顏色（只）以上各（10個大拇指） .item班。

照片圖1

Answer 1

您可以通過9創建一個包含從A通過F和字母數字0一個變量字符串，用String.prototype.concat()和Array.from()從字符串變量串連隨機字符設置元素的box-shadow 。

$(function() { 
 
    var base = ['#00A9E0', '#E82425', '#EFB12A']; 
 
    var shadow = "0 0 0 5px "; 
 

 
    function randomColor() { 
 
    return shadow + base[Math.floor(Math.random() * base.length)] 
 
    } 
 
    
 
    $(".item").each(function() { 
 
    $(this).css("boxShadow", randomColor()) 
 
    }) 
 
})

.item { 
 
    width: 50px; 
 
    height: 50px; 
 
    display: inline-block; 
 
    margin: 8px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> 
 
</script> 
 
<div class="item">1</div> 
 
<div class="item">2</div> 
 
<div class="item">3</div> 
 
<div class="item">4</div> 
 
<div class="item">5</div> 
 
<div class="item">6</div> 
 
<div class="item">7</div> 
 
<div class="item">8</div> 
 
<div class="item">9</div> 
 
<div class="item">10</div>

Answer 2

BoxShadow = function() { 
 
    var hfiColors = ['#00A9E0', '#E82425', '#EFB12A']; 
 
    var colors = hfiColors.slice(0); 
 

 
    $('.program-gallery .item img').each(function(){ 
 
    var colorIndex = Math.floor(Math.random() * colors.length);  
 
    $(this).css('box-shadow', '0 0 0 5px' + colors.splice(colorIndex, 1)); 
 
    }); 
 
} 
 
$(document).ready(BoxShadow);

.item { width: 30%; display: inline-block; vertical-align:top; } 
 
img { max-width: 100% }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div class="program-gallery"> 
 
    <div class="item"> 
 
    <figure class="uk-overlay uk-overlay-hover"> 
 
     <img src="https://placem.at/things?w=1600&h=980&txt=0&random=201" alt=""> 
 
     <figcaption class="uk-overlay-panel uk-overlay-background uk-overlay-fade uk-flex uk-flex-bottom"> 
 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit consequuntur. 
 
     </figcaption> 
 
     <a class="uk-position-cover"></a> 
 
    </figure> 
 
    </div> 
 
    <div class="item"> 
 
    <figure class="uk-overlay uk-overlay-hover"> 
 
     <img src="https://placem.at/things?w=1600&h=980&txt=0&random=202" alt=""> 
 
     <figcaption class="uk-overlay-panel uk-overlay-background uk-overlay-fade uk-flex uk-flex-bottom"> 
 
     Suscipit blanditiis quos aspernatur minus optio beatae consectetur quidem accusantium rerum ab sed nisi. 
 
     </figcaption> 
 
     <a class="uk-position-cover"></a> 
 
    </figure> 
 
    </div> 
 
    <div class="item"> 
 
    <figure class="uk-overlay uk-overlay-hover"> 
 
     <img src="https://placem.at/things?w=1600&h=980&txt=0&random=203" alt=""> 
 
     <figcaption class="uk-overlay-panel uk-overlay-background uk-overlay-fade uk-flex uk-flex-bottom"> 
 
     Culpa consequuntur necessitatibus laboriosam, quas quos odit non unde consequatur fugit rerum incidunt. 
 
     </figcaption> 
 
     <a class="uk-position-cover"></a> 
 
    </figure> 
 
    </div> 
 
</div>

更新您的代碼升技。併爲視覺效果添加了一些CSS。

$('.program-gallery .item img').each(function(){ 
// I targeted each image instead of `.item` 

而不必切片和Concat的你的陣列從中刪除項目，只需使用splice的：

$(this).css('box-shadow', '0 0 0 5px' + colors.splice(colorIndex, 1));