在jQuery中使用If Else

Question

Build an if else statement in my script.

If data = 0 I want to run return:

<i class="fa fa-check-circle"></i>

If data = 1 I want to run return:

<i class="fa fa-id-badge"></i>

If data = 2 I want to run return:

<i class="fa fa-quora"></i>

I have build a simple If Else statement so far. My script shows fa fa-check-circle when the returned data is 0 else it shows fa fa-id-badge.

Does someone know how I can make a definition for all the options. Something like:

(data == 0)
(data == 1)
(data == 2)

Here is my script:

<script type="text/javascript">
 $( document ).ready(function() {
  $('#grid1').DataTable({
   "bprocessing": true,
   "serverSide": true,
        "ajax": {
            "url": "response1.php",
            "type": "POST",
            "error": function(){
                $("#grid_processing").css("display","none");
            }
        },
       "columnDefs": [ 
            { "targets": 0, "render": 
            function ( data, type, full, meta ) { 
            return  '<i class="'+ (data == 0 ? 'fa fa-check-circle"></i>' :  'fa fa-id-badge"></i>'); 
            } } 
        ]    
  });   
 });
</script>

Answer 1

This really only requires a basic if ... else statement instead of a ternary. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else

function ( data, type, full, meta ) { 
    var class;
    if (data == 0) {
        class = 'fa fa-check-circle';
    } else if (data == 1) {
        class = 'fa fa-id-badge';
    } else if (data == 2)) {
        class = 'fa fa-id-quora';
    }
    return  '<i class="' + class + '"></i>'); 
}

Of course you could continue to use a ternary but it's a bit ugly:

function ( data, type, full, meta ) { 
    return  '<i class="fa ' + (data == 0 ? 'fa-check-circle' : (data == 1 ? 'fa-id-badge' : 'fa-quora')) + '"></i>'); 
}