jquery - jQuery根据其值设置元素背景色

我要这样的事情：

<script>
    $(document).ready(function(){
        $(".colored").css("background-color", "rgb(255, 100 + $(this).val(), 0)");
    });
</script>

目的是将基于每个元素的值对“彩色”类的所有元素进行着色。我该如何运作？谢谢。

最佳答案

您可以使用$.each()和$.text()遍历它们，并将文本内容值应用为背景颜色的一部分。

$('.colored').each(function() {
  $(this).css('background-color','rgb(255,' + (100 + parseInt($(this).text()) ) + ',0)');
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="colored">50</div>
<div class="colored">100</div>
<div class="colored">130</div>

或者假设这些是input标记，则可以使用$.val()

$('.colored').each(function() {
  $(this).css('background-color','rgb(255,' + (100 + parseInt($(this).val())) + ',0)');
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="colored" value="50">
<input type="text" class="colored" value="100">
<input type="text" class="colored" value="130">