缩短if shorten语句

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到正确的#模式id，当点击。越简单越好，我对处理数组的知识非常有限。希望有人能帮我，因为我的最后期限快到了。

Answer 1

这应该对您有好处，因为您希望“匹配”pakke1和modal1等等。

因此，我们使用id和.attr("id")，并删除"pakke“，所以剩下的是数字。

然后，您可以像下面这样将数字添加到$("#modal")中。

​

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

​

Answer 2

稍微不同的方法是，您可以使用regex从字符串中提取数字。

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

提示:如果id没有数字，则使用replace代替match，它将引发异常。

Answer 3

您可以使用jquery selector，其中可以绑定使用pakke启动id的所有元素的单击事件，请参见下面的代码

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

如果id以pakke开头的元素数量增加或减少，这将对您有所帮助。