jQuery définir une couleur d'arrière-plan des éléments en fonction de sa valeur

Question

je vais quelque chose comme ceci:

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

L'objectif étant que tous les éléments de la classe « de couleur » sera ombragé basé sur la valeur de chaque élément . Comment puis-je le faire fonctionner? Merci.

Answer 1

Vous pouvez utiliser $.each() et $.text() pour passer en boucle et appliquer la valeur du contenu du texte en tant que couleur d'arrière-plan.

$('.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>

Ou ce sont input en supposant des balises, vous pouvez utiliser $.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

Essayez le code ci-dessous

<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

Utilisez ce, supposons que votre élément HTML est div, si elle est zone de texte utilisez $ (this) .val() au lieu de $ (this) .text()

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