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“匹配”，依此类推。

因此我们将id与.attr("id")一起移除并删除“pakke”，以便我们留下号码。

然后，您可以将此号码添加到$("#modal")，例如$("#modal" + number)

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

Answer 2

稍微不同的方法，您可以使用正则表达式从字符串中提取数字。

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

提示：使用replace代替match，因为id没有数字，它会抛出异常。

Answer 3

你可以使用jquery start with selector，你可以为所有以pakke开头id的元素绑定click事件，见下面的代码

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

的元素数量增加或减少，这将对您有所帮助

缩短if else声明

3 个答案: