javacriptのコードを変更

Question

ステータスが1の場合は結果がテキスト "承認済み"で、クラスが "label label-sm label-success"で、クラスがステータスを作成したい場合はその逆です。

私はクラスによってJavaScriptに変更の上のようなコードを持っている場合は、この

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

のようなコードがどのようにコードを作成する必要がありますか？

Answer 1

あなたはステータス・フィールドを格納するための隠しフィールドを必要とする第一の事 第二私はすべて/場合、他のコードを削除して、JSはすべて

をHANDELSするようになると思いますので、HTMLコードは、この

のようになります。

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

if/elseは複数回実行する必要があるため、関数に書き込むことができます。

ページが読み込まれると、関数が実行されます。

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

それはあなたが求めているものを理解するのは難しいのですが、あなたは適切なテキストとクラスを持つ要素を作成する簡単な方法を求めることを意味している場合、これは動作します：

だから、JSは次のようになります。

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

これはあなたがドンたいものである場合、これをチェックアウトして、ちょうどその正しいなら、私に知らせたり、まだ修正

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>

を必要としてください。