Question

我有HTML代码：

<div class="color-block">
    <h6 class="elliot-bold">Color</h6>
    <ul>
        <li><a href="#!">#ff0142;</a></li>
        <li><a href="#!">#ff8500;</a></li>
        <li><a href="#!">#ffde00;</a></li>
        <li><a href="#!">#96bc05;</a></li>
        <li style="margin-right: 0px;"><a href="#!">#2cb8db;</a></li>
    </ul>
</div>

我需要根据

应用背景颜色

<a href="#!">#96bc05;</a>

动态估值。我尝试的是使用jQuery，每个函数都是这样的：

$('.color-block ul li a').each(function(){
     var color = $(this).html();
     $(this).css('background-color', color)
})

它无法正常工作，我无法找到如何实现这一目标的例子。

Answer 1

试试这个

$(this).css('background-color', color.replace(";",""));

Answer 2

从html中删除分号或在jquery中使用replace。

＆＃13;

$('.color-block ul li a').each(function(){
       var color = $(this).text()
       console.log(color)
       $(this).css('background-color',color)
    })

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="color-block">
    <h6 class="elliot-bold">Color</h6>
    <ul>
        <li><a href="#!">#ff0142</a></li>
        <li><a href="#!">#ff8500</a></li>
        <li><a href="#!">#ffde00</a></li>
        <li><a href="#!">#96bc05</a></li>
        <li style="margin-right: 0px;"><a href="#!">#2cb8db;</a></li>
    </ul>
</div>

＆＃13;

$('.color-block ul li a').each(function(){
       var color = $(this).text()
       console.log(color)
       $(this).css('background-color',color.replace(";",""))
    })

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="color-block">
    <h6 class="elliot-bold">Color</h6>
    <ul>
        <li><a href="#!">#ff0142;</a></li>
        <li><a href="#!">#ff8500;</a></li>
        <li><a href="#!">#ffde00;</a></li>
        <li><a href="#!">#96bc05;</a></li>
        <li style="margin-right: 0px;"><a href="#!">#2cb8db;</a></li>
    </ul>
</div>

＆＃13;

将背景颜色应用于每个元素

2 个答案: