Question

我有各种页面加载到同一个iframe，所以我有这些功能

$("#a1").click(function () { 
      $("#frame").attr("src", "page1.html");
});
$("#a2").click(function () { 
      $("#frame").attr("src", "page2.html");
});
$("#a3").click(function () { 
      $("#frame").attr("src", "page3.html");
});

如何使函数加载"page"+numid+".html"

以使juste成为一个函数

Answer 1

您可以使用属性选择器 [attribute='value'] 来选择带有ID的元素，以选择以a使用[id^='a']开头的ID。使用 slice() 获取数字

$("[id^=a]").click(function () { 
      $("#frame").attr("src", "page" + this.id.slice(1) + ".html/");
});

Answer 2

Attribute Starts With Selector [name^="value"]

$("[id^=a]").click(function () { 
      $("#frame").attr("src", "page"+this.id.replace('a')+".html");
});

<小时/> 或

.match(/\d+$/)[0]从ID中获取号码

$("[id^=a]").click(function () { 
      $("#frame").attr("src", "page"+this.id.match(/\d+$/)[0]+".html");
});

$("[id^=a]") - ＆gt;所有以id a

开头的元素

Answer 3

使用Multiple Selector ("selector1, selector2, selectorN")

$("#a1, #a2, #a3").click(function () { 
     var num = this.id.match(/\d+/)[0]; //Extract number from ID
     $("#frame").attr("src", "page"+num +".html");
});

或者

您可以使用Attribute Starts With Selector [name^="value"]，虽然我不建议

$("[id^=a]").click(function () { 
     var num = this.id.match(/\d+/)[0]; //Extract number from ID
     $("#frame").attr("src", "page"+num +".html");
});

如何创建一个函数来加载各种iframe？

3 个答案: