javascript - 缩短 if else 语句

Question

我正在做一个学校项目并编写了这段代码:

$("#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");  
    }
});

我很难将其缩短，因此它可以在单击时将#pakke id 连接到正确的#modal id。越简单越好，我对使用数组的了解非常有限。希望有人能在我的最后期限临近时帮助我。

Answer 1

这应该可以解决问题，因为您想将 pakke1 与 modal1 等“匹配”。

所以我们使用 .attr("id") 获取 id 并删除“pakke”，这样我们就剩下了数字。

然后你可以像这样将数字添加到 $("#modal") $("#modal"+ number)

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