li jquery on click：如果切换

Question

I'm making a simple filter system where each li value has a certain description. Currently it's working with an IF statement, but I'd like to convert it to a switch. Is this possible?

Thanks in advance.

My code:

$("ul.simplefilter").on('click', 'li', function (e) {

if($(this).text() == "Iedereen"){
    $("#uitleg p").remove();
    $("#uitleg").append("<p>Iedereen</p>");        
}
else if($(this).text() == "Coach studentenparticipatie"){ 
    $("#uitleg p").remove();    
    $("#uitleg").append("<p>Coach studentenparticipatie</p>");
}
else if($(this).text() == "Communicatie"){ 
    $("#uitleg p").remove();    
    $("#uitleg").append("<p>Communicatie</p>");
}
else if($(this).text() == "Coördinator"){ 
    $("#uitleg p").remove();    
    $("#uitleg").append("<p>Coördinator</p>");
}
})

Answer 1

Is this possible?

Yes, just use switch statement.

$("ul.simplefilter").on('click', 'li', function (e) {
   switch($(this).text()){
     case "Iedereen":
        $("#uitleg p").remove();
        $("#uitleg").append("<p>Iedereen</p>");
        break;
     case "Coach studentenparticipatie":
        $("#uitleg p").remove();    
        $("#uitleg").append("<p>Coach studentenparticipatie</p>");
        break;

   }
});

Also, you can achieve that with single line using .html() method.

$("ul.simplefilter").on('click', 'li', function (e) {
     $('#uitleg').html('<p>'+$(this).text()+'</p>');
});

If you have, for instance, 100 values it is expensive to write 100 cases, just use .html() method.

Answer 2

The switch statement will look something like this:

$("ul.simplefilter").on('click', 'li', function (e) {

switch($(this).text()){
    case "Iedereen" :
      $("#uitleg p").remove();
      $("#uitleg").append("<p>Iedereen</p>");
      break;
....

PS. Don't forget the break; on each case.