我似乎弄乱了一些括号,逗号,分号。它们在Emacs中突出显示为不正确。我认为这就是为什么它不起作用。我似乎迷失在花括号,逗号和分号中。我评论了哪些部分以红色高亮显示语法错误。
var myGallery = (function () {
var s;
return {
settings: {
data: JSON.parse(data),
filter: document.getElementById("filter"),
gallery: document.getElementById("gallery")
},
init: function() {
// kick things off
s = this.settings;
// By default, call the fillImages function with 'all' tag
this.createFilters("all");
},
createFilters: function(tag) {
// Load the image data
// I made imgs global as I couldn't access it from displayImg
imgs = this.settings.data.images;
// Get image tags and generate a tag array
var tags = ["all"];
for(var i = 0; i < Object.keys(imgs).length; i++) {
// Check if a tag is already in tags
if (tags.indexOf(imgs[i].tag) > -1) {
// Yes, it is, so don't add it
} else {
// No, it isn't, so add it to 'tags'
tags.push(imgs[i].tag);
}
}
// Create an unordered list, assign a class to it and append to filter
var ul = document.createElement('ul');
ul.classList.add("ul-bare");
this.settings.filter.appendChild(ul);
// Iterate over the array and append each element as li
for(var i = 0; i < tags.length; i++) {
var li=document.createElement('li');
ul.appendChild(li);
li.innerHTML=tags[i];
li.onclick = (function(x){
return function() {
this.displayImg(tags[x]);
})(i); // the first ) is highlighted in red
}
}, // both the curly brace and the comma are highlighed in red
displayImg: function(filter) {
// Add images to #gallery
for(var i = 0; i < Object.keys(imgs).length; i++) {
var div = document.createElement("img");
// If the tage is 'all', display all images
if (filter === "all") {
div.src = imgs[i].src;
this.settings.gallery.appendChild(div);
} else {
// Display only images of certain category (tag argument)
if (imgs[i].tag === filter) {
div.src = imgs[i].src;
this.settings.gallery.appendChild(div);
}
}
}
}
}; // the semi colon is highlighted in red
}());
myGallery.init();
编辑: 似乎一切都归结为我的关闭。一旦我评论了这一部分,一切都很好:
//li.onclick = (function(x){
// return function() {
// this.displayImg(tags[x]);
// })(i);
编辑2:
所以我有以下内容:
li.onclick = (function(x) {
return function() {
console.log(tags[x]);
this.displayImg(tags[x]);
};
})(i);
如果我只想打印标签[x],这完全符合预期,但是如果我添加第二个语句this.displayImg ....,那么我得到的错误是this.displayImg不是函数。
请告知。
谢谢。
答案 0 :(得分:1)
// ...
li.onclick = (function(x){
return (function() {
this.displayImg(tags[x]);
})
})(i);
// ...