javascript - anchor 上的随机背景颜色只获得第一个 anchor ？

Question

我有 3 个 anchor block ，当我加载页面时，我需要 3 个不同的随机 background-colors。然而，只有第一个 anchor 随机改变 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 个带有“阅读更多” anchor 的 block ，这些 anchor 具有需要随机更改的 background-color。我是否必须创建一个循环或其他东西？

在这里你可以看到第一个 anchor 确实改变了背景颜色:

感谢您的宝贵时间!

Answer 1

您所有的a 元素都具有相同的id，这是无效的。 id 属性必须是唯一的。要解决此问题，请更改您的 HTML，使 a 元素都具有一个公共(public)类。

您还需要遍历所有这些元素并单独应用一种颜色，就像您为它们赋予相同颜色的那一刻一样。试试这个:

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>