缩短if else语句

Question

I am working on a school project and have made this code:

$("#pakke1, #pakke2, #pakke3, #pakke4, #pakke5, #pakke6, #pakke7, #pakke8, #pakke9, #pakke10, #pakke11, #pakke12").click(function() {
    if($(this).is('#pakke1')){
        $("#modal1").css("display","inline-block");  
    }
    else if($(this).is("#pakke2")){
        $("#modal2").css("display","inline-block");  
    }
    else if($(this).is("#pakke3")){
        $("#modal3").css("display","inline-block");  
    }
    else if($(this).is("#pakke4")){
        $("#modal4").css("display","inline-block");  
    }
    else if($(this).is("#pakke5")){
        $("#modal5").css("display","inline-block");  
    }
    else if($(this).is("#pakke6")){
        $("#modal6").css("display","inline-block");  
    }
    else if($(this).is("#pakke7")){
        $("#modal7").css("display","inline-block");  
    }
    else if($(this).is("#pakke8")){
        $("#modal8").css("display","inline-block");  
    }
    else if($(this).is("#pakke9")){
        $("#modal9").css("display","inline-block");  
    }
    else if($(this).is("#pakke10")){
        $("#modal10").css("display","inline-block");  
    }
    else if($(this).is("#pakke11")){
        $("#modal11").css("display","inline-block");  
    }
    else if($(this).is("#pakke12")){
        $("#modal12").css("display","inline-block");  
    }
});

and I am having a hard time shortening it down so it can connect the #pakke id to the right #modal id when clicked. The more simple the better, I have very limited knowledge of working with arrays. hope someone can help me as my deadline is closing in.

Answer 1

This should do the trick for you since you want to "match" pakke1 with modal1 and so on.

So we take the id with .attr("id") and remove "pakke" so we are left with the number.

Then you can add the number to $("#modal") like this $("#modal" + number)

 $("[id^='pakke']").click(function() { var number = $(this).attr("id").replace("pakke", ""); $("#modal" + number).css("display", "inline-block"); }); 

Answer 2

Slightly different approach, you can use regex to just extract the number from the string.

var number = $(this).attr("id").replace(/^\D+/g, '');
$("#modal" + number).css("display", "inline-block");

Tip: using replace instead of match as in case id does not have a number, it will throw an exception.

Answer 3

You can make use of jquery start with selector where you can bind click event for all elements starting id with pakke , see below code

$("[id^=pakke").click(function() {//bind click handler for all having id start with pakke
  var number = $(this).attr("id").replace("pakke", "");
  $("#modal" + number).show();//use show() method instead of display 
});

This will help you if there is increase or decrease in number of elements having id start with pakke