ändern Sie den Code in Javascript

Question

Ich möchte Status nach Klasse erstellen, wenn Status = 1 Ergebnis ist Text "genehmigt" und Klasse "Label Label-SM Label-Erfolg" und umgekehrt.

Ich habe Code wie diese

<span class="<?php if($row->status==0) { 
      echo 'label label-sm label-warning'; 
     } else if ($row->status==1) { 
      echo 'label label-sm label-info'; 
     } else { 
      echo 'label label-sm label-success'; 
}?>"> 
<?php 
    if ($row->status == 0) { 
     echo 'Processing'; 
    } else if ($row->status==1) { 
     echo 'Waiting'; 
    } else { 
     echo 'Approved'; 
    }?></span> 

wie Code zu erstellen, wenn ich wie Code habe über Änderung von Klasse Javascript?

Answer 1

erste, was müssen Sie ein verstecktes Feld das Statusfeld speichern 2. Ich glaube, ich alle if/else-Code entfernen wird und die JS lassen alle so der HTML-Code

handels wie diese

aussehen

<input type='hidden' id='status' value='<?php echo $row->status?>' /> 
<span id='targetSpan' class=""> </span> 

In der js, als der if/else muss möglicherweise mehrmals ausgeführt werden, so schreibe ich es in eine Funktion.

Und als die Seite laden, sollte die Funktion ausgeführt werden. So würde die JS wie folgt aussehen:

$('#document').ready(function() { 
    updateSpanClass(); //call at beginning 

    function updateSpanClass(){ 
     var status = $('#status').val(); 

     //every call of the function i class the class first 
     $('#targetSpan').removeClass(); 

     if(status == 1){ 
      $('#targetSpan').addClass('label label-sm label-info'); //update class 
      $('#targetSpan').html('Waiting'); //update text 
     } else if(status == 0) { 
      $('#targetSpan').addClass('label label-sm label-warning'); 
      $('#targetSpan').html('Processing'); 
     } else { 
      $('#targetSpan').addClass('label label-sm label-success'); 
      $('#targetSpan').html('Approved'); 
     } 
    } 
}); 

Answer 2

Es ist schwierig zu verstehen, was Sie fragen, aber wenn Sie für eine einfachere Art und Weise zu fragen, bedeutet das Element mit dem richtigen Text und Klasse zu erstellen, das funktionieren würde:

<?php 
    $vars = $row->status==0 ? ['warning','Processing'] : ($row->status==1 ? ['info','Waiting'] : ['success','Approved']); 
    echo '<span class="label label-sm label-'.$vars[0].'">'.$vars[1].'</span>'; 
    ?> 

Answer 3

Bitte überprüfen Sie dies, wenn dies etwas, das Sie don wollen und lassen Sie mich wissen, wenn ihr richtig oder Sie müssen noch Änderungen

function myStatus(){ 
 

 
if ($(".status").data('status') == '0'){ 
 
    $(".status").addClass('label label-sm label-warning').css({'color':'red'}) 
 
}else if($(".status").data('status') == '1'){ 
 
$(".status").addClass('label label-sm label-info').css({'color':'yellow'}) 
 
}else{ 
 
$(".status").addClass('label label-sm label-success').css({'color':'black'}) 
 
} 
 

 
if ($(".statusb").data('status2') == '0'){ 
 
    $(".statusb").addClass('label label-sm label-warning').css({'color':'#333'}) 
 
}else if($(".statusb").data('status2') == '1'){ 
 
$(".statusb").addClass('label label-sm label-info').css({'color':'green'}) 
 
}else{ 
 
$(".statusb").addClass('label label-sm label-success').css({'color':'orange'}) 
 
} 
 

 
} 
 

 
myStatus()

span{ 
 
    display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<span class="status1" data-status="insert php echo here ">asd</span> 
 
<span class="status2" data-status2="insert php echo here">asd</span> 
 
<br> 
 
Working Example base on status: 
 
<span class="status" data-status="0">asd</span> 
 
<span class="statusb" data-status2="1">asd</span>