Ich versuche, ein Überprüfungssystem in WP mit erweiterten benutzerdefinierten Feldern zu erstellen, kann dies jedoch nicht lösen. Ich möchte die Farbe einer Partitur basierend auf der Nummer ändern. Zum Beispiel: Wenn der Verfasser 0-40 als Punktzahl angibt, muss diese in rot geändert werden. Wenn der Schreiber 40-60 setzt, muss er in Orange geändert werden. Wenn der Schreiber 60-80 setzt, muss er grün sein ...

HTML:

<div class="r-summary">
   <span id="score">
      <?php the_field('score'); ?> */HERE GOES THE NUMBER WITH THE SCORE
   </span>
 </div>
5
Neks 22 Aug. 2015 im 19:05

6 Antworten

Beste Antwort

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

(Ändern Sie die Punktzahl im HTML-Bereich und klicken Sie auf "Ausführen", um Änderungen anzuzeigen.)

$(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);
    }
});
8
Bitwise Creative 22 Aug. 2015 im 16:13

Verwenden Sie diese Funktion im Status document.ready, wenn Sie die Partitur mit PHP laden, damit die Spanne beim Laden des Dokuments bearbeitet wird:

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

Ich habe hier 50 als score Beispiel verwendet, und Sie können es ändern und die Ergebnisse anzeigen.

Sie werden so vorgehen:

  • Holen Sie sich die Punktzahl aus der Spanne.
  • Ändern Sie die Farbe der Spanne entsprechend dem Bewertungswert.
3
cнŝdk 22 Aug. 2015 im 17:07

So etwas könnte auch funktionieren.

<?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>
0
ooXei1sh 22 Aug. 2015 im 16:18

Versuchen Sie den folgenden Code

<!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>
0
Gawad Azzam 22 Aug. 2015 im 16:30

Das ist die Lösung.

HTML:

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

JQuery:

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

Schauen Sie sich diese Geige an!

0
Ahmad Hassan 22 Aug. 2015 im 16:20

Wenn Sie es mit nativem JS machen wollen.

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

0
evrim oku 22 Aug. 2015 im 16:57