JQuery - изменить цвет текста диапазона на основе числового значения

Я пытаюсь создать систему обзора в WP с расширенными настраиваемыми полями, но я не могу решить эту проблему. Я хочу изменить цвет оценки на основе числа. Например: если автор ставит 0-40 в качестве оценки, он должен быть изменен на красный; если автор ставит 40-60, он должен быть изменен на оранжевый; если writter ставит 60-80 он должен быть зеленым ...JQuery - изменить цвет текста диапазона на основе числового значения

HTML:

<div class="r-summary"> 
    <span id="score"> 
     <?php the_field('score'); ?> */HERE GOES THE NUMBER WITH THE SCORE 
    </span> 
</div>

источник

2015-08-22 Neks

Вы забыли опубликовать JavaScript, который вы пробовали, и PHP не имеет отношения к вашему вопросу. – j08691

Fiddle: http://jsfiddle.net/5zdemo3j/

(изменить счет в разделе HTML и "Выполнить", чтобы увидеть изменения)

$(function() { 
    // Score Color 
    var score = parseInt($('#score').text().trim()); 
    var color = 'red'; 
    if (!isNaN(score)) { 
     if (score >= 40) { 
      color = 'orange'; 
     } 
     if (score >= 60) { 
      color = 'green'; 
     } 
     $('#score').css('color', color); 
    } 
});

источник

2015-08-22 16:13:40

Работает как шарм !! Спасибо :) – Neks

У меня вопрос. Что, если я тоже захочу изменить фоновое изображение? Это возможно? – Neks

Конечно.Изучите код и выясните, как можно добавить фоновое изображение. Подсказка: другой var, например 'color', и другой вызов' .css() '. –

Нечто подобное может работать.

<?php 
    function the_field() { 
     return htmlspecialchars('40-60'); 
    } 
    ?> 

    <html> 
    <head> 
     <style> 
     .red { 
      background: red; 
     } 
     .orange { 
      background: orange; 
     } 
     .green { 
      background: green; 
     } 
     </style> 
    </head> 
    <body> 

    <div class="r-summary"> 
     <span id="score"> 
      <?php echo the_field('score'); ?> 
     </span> 
    </div>  

    <script src="//code.jquery.com/jquery-1.11.3.min.js"></script> 
    <script> 
    $(function(){ 

     var $span = $('.r-summary').find('#score'); 
     var score = $span.text().trim(); 
     console.log(score); 
     switch(score) { 
      case '0-40': 
       $span.addClass('red'); 
       break; 
      case '40-60': 
       $span.addClass('orange'); 
       break; 
      case '60-80': 
       $span.addClass('green'); 
       break; 
     } 
    }); 
    </script> 
    </body> 
    </html>

источник

2015-08-22 16:18:11 ooXei1sh

Это решение.

HTML:

<div class="r-summary"> 
 
    <span id="score"> 
 
     75 <!--Value Printed by PHP--> 
 
    </span> 
 
</div>

JQuery:

$(document).ready(function(){ 
 
    var score = $('#score').text(); 
 
\t if (score >= 0 && score <= 40) 
 
\t { 
 
    \t $('#score').css('background-color','red'); 
 
\t } 
 
    else if (score > 41 && score <= 60) 
 
    { 
 
    \t $('#score').css('background-color','orange'); 
 
\t } 
 
    else if (score > 61 && score <= 80) 
 
    { 
 
    \t $('#score').css('background-color','green'); 
 
     $('#score').css('color','white'); 
 
\t } 
 
});

Заканчивать этот fiddle!

источник

2015-08-22 16:20:57

Если вы хотите сделать это с помощью родной JS.

(function() { 
    var scoreSpan = document.getElementById("score"), 
     score = parseInt(scoreSpan.innerHTML); 

    if (score != NaN) { 
     if (score >= 0 && score <= 40) { 
      scoreSpan.style.color = 'red'; 
     } else if (score > 40 && score <= 60) { 
      scoreSpan.style.color = 'orange'; 
     } else if (score > 60 && score <= 80) { 
      scoreSpan.style.color = 'green'; 
     } else { 
      scoreSpan.style.color = 'black'; // or whatever you want as default 
     } 
    } 
}());

http://jsfiddle.net/evrim/tmy74u46/

источник

2015-08-22 16:23:23

попробовать приведенный ниже код

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 
    <script> 
     $(document).ready(function(){ 
       var score = parseInt($("#score").text(),10); 
       if(score >= 0 && score < 40){ 
        $("#score").removeClass().addClass("redScore"); 
       }else if(score >= 40 && score < 60){ 
        $("#score").removeClass().addClass("orangeScore"); 
       }else if(score >= 60 && score < 80){ 
        $("#score").removeClass().addClass("greenScore"); 
       } 
      }); 
    </script> 
    <style> 
     .redScore{ 
      color: #FF0000; 
     } 
     .orangeScore{ 
      color: #FF9933; 
     } 
     .greenScore{ 
      color: #33CC33; 
     } 
    </style> 
</head> 
<body> 
<div class="r-summary"> 
    <span id="score"> 
    70 
    </span> 
</div> 
</body> 
</html>

источник

2015-08-22 16:30:21

использовать эту функцию в document.ready состоянии, если вы загружаете счет с PHP, так что диапазон будет редактироваться при загрузке документа:

$(document).ready(function() { 
 
    var score = parseInt($("#score").text()); 
 
    if (score <= 40) { 
 
    $('#score').css('color', 'red'); 
 
    } else if (score > 40 && score <= 60) { 
 
    $('#score').css('color', 'orange'); 
 
    } else if (score > 60) { 
 
    $('#score').css('color', 'green'); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="r-summary"> 
 
    <span id="score"> 
 
    50 
 
    </span> 
 
</div>

Я использовал 50 как пример score, и вы можете изменить его и увидеть результаты.

Вы действуйте следующим образом:

Получить счет от пролета.
В соответствии со значением оценки измените цвет пролета.

источник

2015-08-22 16:40:16

JQuery - изменить цвет текста диапазона на основе числового значения

ответ

Смежные вопросы