Estoy tratando de construir un sistema de revisión en WP con Advanced Custom Fields, pero no puedo resolver esto. Quiero cambiar el color de una puntuación basada en el número.
Por ejemplo: si el escritor pone 0-40 como la puntuación tiene que ser cambiado a rojo; si el escritor pone 40-60 tiene que ser cambiado a naranja; si la escritora pone 60-80 tiene que ser verde…

HTML:

<div class="r-summary">
   <span id="score">
      <?php the_field('score'); ?> */HERE GOES THE NUMBER WITH THE SCORE
   </span>
 </div>
  • Usted se olvidó de enviar el código JavaScript que intentó, y el PHP es irrelevante a su pregunta.
InformationsquelleAutor Neks | 2015-08-22

6 Comentarios

  1. 6

    Violín: http://jsfiddle.net/5zdemo3j/

    (cambio de la puntuación en la sección HTML y «Ejecutar» para ver los cambios)

    $(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);
        }
    });
    • Funciona como un encanto!! Gracias 🙂
    • Tengo una pregunta. Lo que si quería cambiar la imagen de fondo también? Sería posible?
    • Por supuesto. Estudio del código y averiguar cómo usted puede añadir una imagen de fondo así. Sugerencia: Otra var como color, y otro .css() llamada.
  2. 3

    Utilizar esta función en document.ready estado de si va a cargar la puntuación con PHP, el lapso será editado cuando el documento es cargado:

    JS:

    $(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');
      }
    });

    HTML:

    <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>

    He utilizado 50 como un score ejemplo aquí, y usted puede cambiar y ver los resultados.

    Se procederá así:

    • Obtener la puntuación de la luz.
    • De acuerdo con el valor de puntuación, cambiar el color de la luz.
  3. 0

    Algo como esto puede funcionar así.

    <?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>
  4. 0

    Esta es la solución.

    HTML:

    HTML:

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

    jQuery:

    JS:

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

    Echa un vistazo a este el violín!

  5. 0

    de intentar el siguiente código

    <!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>
  6. 0

    Si quieres hacerlo de forma nativa con 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/

Dejar respuesta

Please enter your comment!
Please enter your name here