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个块，其中包含“阅读更多”＆＃39;锚点，这些锚点有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不一样。

input = regex_replace(input, rex, rep_string);

Answer 3

使用jQuery并循环遍历具有该id的所有元素，如果您没有机会更改每个元素的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应该是唯一的

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

3 个答案:

修改