Question

I am using this script to update the database on select change in a form :

$(document).ready(function() {
        $('select.changeStatus').change(function(){
                $.ajax({
                        type: 'POST',
                        url: 'Change-status.php',
                        data: {selectFieldValue: $('select.changeStatus').val(), projectId: $('input[name$="projectId"]').val()},
                        success: function(data){},
                        dataType: 'html'
                 });
        });
});

I’d like to insert a switch statement in the success setting in order to modify the CSS class of the <div/> containing my form according to certain conditions. The idea is to do this :

If selectFieldValue is 0, make my <div/> background red, if it’s 1, make the background orange, if it’s 2, make the background green.

I’m actually planning on using this : $("#mydiv").css({'background-color': "red"}), I’m just having trouble nesting it in a switch within the success setting.

How can I do so? Or, is there a better way to do this?

Thanks a lot.

Answer 1

A switch statement would be a bit verbose. If the value will be 0, 1, or 2, you can use those as indexes to lookup a value from within an array of values:

success: function(data){
  var colors = [ "red", "orange", "green" ],
      _value = $('select.changeStatus').val();
  $("#mydiv").css("background", colors[ _value ]);
}

Update:

OP asks: Excellent, thanks a lot. In the case of ranges (0-1 for red, 2-3 for orange, 4-5 for green), is there a better way to do this than the following?

var colors = [ "red", "red", "orange", "orange", "green", "green" ]

If you’re wanting to form collections of numbers, where 0 and 1 result in one color, 2 and 3 result in another color, and 4 to 5 result in yet another, I would approach this slightly differently. We know that if the number is odd, it is on the high-end of the collection. After all, 2-3, and 4-5, both have odd numbers on their high-end. This means, if the number is odd, it should behave the same as its earlier contiguous partner. So if the number was five or four, we use four. If it was three or two, we use two.

success: function(data){
  var colors = [ "red", "orange", "green" ],
      _value = $('select.changeStatus').val();

  if ( _value % 2 != 0 ) _value--; // Converts 1 to 0, 3 to 2, 5 to 4, etc.

  $("#mydiv").css("background", colors[ _value ]);
}