var tag=["header","article","footer"]; var datei=["header.html","article.html","footer.html"]; $(function(){ $(tag[0]).load(datei[0]); }); $(function(){ $(tag[1]).load(datei[1]); }); $(function(){ $(tag[2]).load(datei[2]); });
$()
ist eine Kurzschreibweise für $(document).ready()
und das heißt, dass die Reihenfolge in der dein Code ausgeführt wirst, nicht die gleiche ist, in der man den Code auch liest. Folgendes geht zum Beispiel schief:
var tag=["header","article","footer"];
var datei=["header.html","article.html","footer.html"];
for (var i = 0; i < tag.length; i++) {
$(function(){
$(tag[i]).load(datei[i]);
});
}
Wenn die Zeile $(tag[i]).load(datei[i])
ausgeführt wird, ist die for-Schleife bereits durchgelaufen und i
ist dann immer 2
.
Mit einem let
-Binding ließe sich das Problem beheben:
var tag=["header","article","footer"];
var datei=["header.html","article.html","footer.html"];
for (let i = 0; i < tag.length; i++) {
$(function(){
$(tag[i]).load(datei[i]);
});
}
Aber eleganter wäre es, die Vorschleife in den $-Block mit hinein zu nehmen:
var tag=["header","article","footer"];
var datei=["header.html","article.html","footer.html"];
$(function(){
for (let i = 0; i < tag.length; i++) {
$(tag[i]).load(datei[i]);
}
});
Als Sahnehäubchen würde ich auch die Arrays tag
und datei
zu einem Array zusammenfassen, damit du sie nicht über die Index-Variable i
miteinander korrelieren musst:
const content = [
{ tag: "header", datei: "header.html" },
{ tag: "article", datei: "artcile.html" },
{ tag: "footer", datei: "footer.html" },
];
$(function() {
for (let {tag, datei} of content) {
$(tag).load(datei);
}
});
Mit der Kurzschreibweise für Funktionen könntest du die Leserlichkeit noch zusätzlich erhöhen:
const content = [
{ tag: "header", datei: "header.html" },
{ tag: "article", datei: "artcile.html" },
{ tag: "footer", datei: "footer.html" },
];
$(() => content.forEach(({tag, datei}) => $(tag).load(datei)));