Question

我想要这样的事情：

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

目标是“彩色”类的所有元素将根据每个元素的值进行着色。我怎样才能让它运转起来？感谢。

Answer 1

您可以使用$.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">

Answer 2

尝试以下代码

<script>
    $(document).ready(function(){
        $(".colored").each(function(){
            $(this).css("background-color", $(this).val() );    //Will only work for form elements that support val() function
            // alternatively you could add a data-color="red" kind of attribute to explicitly set color for all elements 
            // $(this).css("background-color", $(this).data("color") ); 
        })        
    });
</script>

Answer 3

使用此方法，假设您的html元素为div，如果是文本框则使用$（this）.val（）而不是$（this）.text（）

 $(".colored").each(function(i){
     var shaded  = 100 + parseInt($(this).text());
      $(this).css("background-color", "rgb(255, "+shaed+", 0)");
    })

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

3 个答案: