锚上的随机背景颜色只能获得第一个锚？

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

这里需要使用不同的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>

Answer 3

如果您没有机会更改每个元素的 id，请使用 jQuery 并遍历具有该 id 的所有元素

$(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>

编辑

如果您使用 find() 函数，您可以循环遍历相同的 id，但请记住，id 应该是唯一的