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>
6 Antworten
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);
}
});
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.
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>
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>
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!
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/