錨點上的隨機背景顏色只能獲得第一個錨點？

Question

我有3個錨塊，我想要3個不同的隨機background-colors當我加載頁面。然而只有第一個錨點是隨機變化的background-color。下面是HTML和jQuery代碼我使用：

<script type="text/javascript"> 
    $(document).ready (function() { 
     var color = '#'; // hexadecimal starting symbol 
     var letters = ['000000','FF0000','00FF00','0000FF','FFFF00','00FFFF','FF00FF','C0C0C0']; 
     color += letters[Math.floor(Math.random() * letters.length)]; 
     document.getElementById('kleur').style.background = color; 
    }); 
</script> 

<div class="content_block_list"> 
    <?php if(have_rows('content_block_list')): ?> 
     <ul> 
      <?php while(have_rows('content_block_list')): the_row(); 
       $content = get_sub_field('content'); 
       $button_link = get_sub_field('button_link'); ?> 
       <li> 
        <div> 
         <?php if ($content == true){ ?> 
          <?php echo $content; ?>   
         <?php } ?> 
         <?php if ($button_link == true){ ?> 
          <a id="kleur" class="more" href="<?php echo $button_link; ?>">LEES MEER</a> 
         <?php } ?> 
        </div> 
       </li> 
      <?php endwhile; ?> 
     </ul>  
    <?php endif; ?> 
</div> 

此代碼自動生成3個街區與「更多」錨，這些錨具有background-color這就需要隨意改變。我必須創建一個循環或什麼？

在這裏你可以看到，第一錨定不改變背景色：

感謝您的時間！

Answer 1

您所有的a元素都有相同的id，這是無效的。 id屬性必須是唯一的。爲了解決這個問題，改變你的HTML，所以a元素都有一個共同的類。

您還需要循環遍歷所有這些元素，然後逐個應用顏色，因爲此時您將它們賦予相同的顏色。試試這個：

var colors = ['000000', 'FF0000', '00FF00', '0000FF', 'FFFF00', '00FFFF', 'FF00FF', 'C0C0C0']; 
 

 
$('.kleur').each(function() { 
 
    var color = '#' + colors[Math.floor(Math.random() * colors.length)]; 
 
    $(this).css('background-color', color); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="content_block_list"> 
 
    <ul> 
 
    <li> 
 
     <div> 
 
     Foo bar 
 
     <a class="kleur more" href="#>">LEES MEER</a> 
 
     </div> 
 
    </li> 
 
    <li> 
 
     <div> 
 
     Foo bar 
 
     <a class="kleur more" href="#>">LEES MEER</a> 
 
     </div> 
 
    </li> 
 
    <li> 
 
     <div> 
 
     Foo bar 
 
     <a class="kleur more" href="#>">LEES MEER</a> 
 
     </div> 
 
    </li> 
 
    </ul> 
 
</div>

Answer 2

使用jQuery和循環通過與該ID的所有元素，如果你沒有機會改變IDS的每一個元素

$(document).ready (function() { 
 
       var letters = ['000000','FF0000','00FF00','0000FF','FFFF00','00FFFF','FF00FF','C0C0C0']; //Set your colors here 
 
       $("ul li").find("#kleur").each(function(){ 
 
        color = letters[Math.floor(Math.random() * letters.length)]; 
 
        $(this).css("background-color","#"+color); 
 
       }); 
 
       });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="content_block_list"> 
 
    <ul> 
 
    <li> 
 
     <div> 
 
     Foo bar 
 
     <a id="kleur" href="#>">LEES MEER</a> 
 
     </div> 
 
    </li> 
 
    <li> 
 
     <div> 
 
     Foo bar 
 
     <a id="kleur" href="#>">LEES MEER</a> 
 
     </div> 
 
    </li> 
 
    <li> 
 
     <div> 
 
     Foo bar 
 
     <a id="kleur" href="#>">LEES MEER</a> 
 
     </div> 
 
    </li> 
 
    </ul> 
 
</div>

編輯

您可以通過相同的ID循環，如果您使用find()功能，但請記住，一個ID應該是唯一的

Answer 3

在這裏，你需要使用不同的ID不相同。

var colors = ['000000', 'FF0000', '00FF00', '0000FF', 'FFFF00', '00FFFF', 'FF00FF', 'C0C0C0']; 

$('.more').each(function() { 
    var id = $(this).attr('id'); 
    var color = '#' + colors[Math.floor(Math.random() * colors.length)]; 
    $('#'+id).css('background-color', color); 
}); 

<div class="content_block_list"> 
    <?php if(have_rows('content_block_list')): ?> 
     <ul> 
      <?php 
       $i = 0; 
       while(have_rows('content_block_list')): the_row(); 
       $content = get_sub_field('content'); 
       $button_link = get_sub_field('button_link'); ?> 
       <li> 
        <div> 
         <?php if ($content == true){ ?> 
          <?php echo $content; ?>   
         <?php } ?> 
         <?php if ($button_link == true){ ?> 
          <a id="kleur_<?php echo $i; ?>" class="more" href="<?php echo $button_link; ?>">LEES MEER</a> 
         <?php $i++; } ?> 
        </div> 
       </li> 
      <?php endwhile; ?> 
     </ul>  
    <?php endif; ?> 
</div>