Question

正确检查以上内容。

我希望数字根据数字改变颜色。会有很多这些，因为它们将成为Wordpress上不同帖子的一部分。目前我只能影响一个人如何影响他们。

jQuery(document).ready(function() {

    var scorePerformance = document.getElementById("performance").textContent;
    console.log(scorePerformance);
    if(scorePerformance >= 9){
        jQuery('#performance').css('color', 'red');
    } else if (scorePerformance >= 8 && scorePerformance < 9 ){
        jQuery('#performance').css('color', 'orange');
    } else if (scorePerformance >= 6 && scorePerformance < 8){
        jQuery('#performance').css('color', 'yellow');
    } else {
        jQuery('#performance').css('color', 'blue');
    } 

    var scoreSongwriting = document.getElementById("songwriting").textContent;
    if(scoreSongwriting >= 9){
        jQuery('#songwriting').css('color', 'red');
    } else if (scoreSongwriting >= 8 && scoreSongwriting < 9 ){
        jQuery('#songwriting').css('color', 'orange');
    } else if (scoreSongwriting >= 6 && scoreSongwriting < 8){
        jQuery('#songwriting').css('color', 'yellow');
    }  else {
        jQuery('#songwriting').css('color', 'blue');
    } 

    var scoreProduction = document.getElementById("production").textContent;
    if(scoreProduction >= 9){
        jQuery('#production').css('color', 'red');
    } else if (scoreProduction >= 8 && scoreProduction < 9 ){
        jQuery('#production').css('color', 'orange');
    } else if (scoreProduction >= 6 && scoreProduction < 8){
        jQuery('#production').css('color', 'yellow');
    }  else {
        jQuery('#production').css('color', 'blue');
    } 

    var scoreBonus = document.getElementById("bonus").textContent;
    if(scoreBonus >= 9){
        jQuery('#bonus').css('color', 'red');
    } else if (scoreBonus >= 8 && scoreBonus < 9 ){
        jQuery('#bonus').css('color', 'orange');
    } else if (scoreBonus >= 6 && scoreBonus < 8){
        jQuery('#bonus').css('color', 'yellow');
    }  else {
        jQuery('#bonus').css('color', 'blue');
    } 

    var scoreFinal = document.getElementById("final").textContent;
    if(scoreFinal >= 9){
        jQuery('#final').css('color', 'red');
    } else if (scoreFinal >= 8 && scoreFinal < 9 ){
        jQuery('#final').css('color', 'orange');
    } else if (scoreFinal >= 6 && scoreFinal < 8){
        jQuery('#final').css('color', 'yellow');
    }  else {
        jQuery('#final').css('color', 'blue');
    } 
});

Answer 1

这是一个更新的小提琴：http://jsfiddle.net/n253R/4/

将您的列表项更改为具有类，而不是ID，因为ID应该是唯一的：

<li class="bonus">10</li>

然后使用jquery的each（）函数，例如：

  jQuery('.bonus').each(function(){
    var scoreBonus = $(this).text();
    if(scoreBonus >= 9){
    jQuery(this).css('color', 'red');
    } else if (scoreBonus >= 8 && scoreBonus < 9 ){
    jQuery(this).css('color', 'orange');
    } else if (scoreBonus >= 6 && scoreBonus < 8){
    jQuery(this).css('color', 'yellow');
    }  else {
    jQuery(this).css('color', 'blue');
    }     
});

Answer 2

如果数量有限（即更像是1..10而不是1..1000），你可以使用这个：

$('li:contains(6)').css('color', 'yellow');
$('li:contains(7)').css('color', 'red');
$('li:contains(8)').css('color', 'green');
$('li:contains(9)').css('color', 'blue');
$('li:contains(10)').css('color', 'orange');

这使它非常易读，很容易找出分配给哪个数字的颜色。

您可以使其更加明确（甚至从某些API /数据库中获取此映射）：

var mapping = {
  '6': 'yellow',
  '7': 'red',
  '8': 'green',
  '9': 'blue',
  '10': 'orange'
};

for (var i in mapping) {
  if (mapping.hasOwnProperty(i)) {
    $('li:contains(' + i + ')').css('color', mapping[i]);
  }
}

Answer 3

一些建议：

当多次选择相同的元素缓存时，它不仅会看起来更干净，而且会更快
document.getElementById("ID")等于jQuery('#ID')只有后者被jQuery
当基于某些逻辑使用不同的参数多次应用相同的方法时，您可以将值存储在变量中并仅调用该方法一次
因为您使用jQuery而不是.text()使用jQuery，所以它会使用crossbrowser
你可以处理集合以及单个元素，事实上jQuery提供了一个很好的.textContent函数，可以大大简化你的代码

至于您的问题的解决方案，您可以重复使用通用类＆＃39;分数＆＃39;你已经有了并使用each作为选择器。所以应用我上面的所有建议你最终会得到这个代码：

jQuery(".scores li")

http://jsfiddle.net/kentaromiura/n253R/5/

Answer 4

Mome的回答是正确的，您应该使用class而不是ID来选择/区分多个元素。但是，如果您仍然需要使用ID，请执行以下操作

$("[id=performance]").each(function(){
    var $this = $(this);
    var scorePerformance = $this.val();
    if(scorePerformance >= 9){
        $this.css('color', 'red');
    } else if (scorePerformance >= 8 && scorePerformance < 9 ){
        $this.css('color', 'orange');
    } else if (scorePerformance >= 6 && scorePerformance < 8){
        $this.css('color', 'yellow');
    } else {
        $this.css('color', 'blue');
    } 
});

我已在此处http://jsfiddle.net/Gem32/1/

更新了上述代码

如果您需要完全匹配，可以使用contains。

Javascript - 如何在没有id的情况下获取元素的内容

4 个答案: