Question

我似乎弄乱了一些括号，逗号，分号。它们在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不是函数。

请告知。

谢谢。

Answer 1

// ...

li.onclick = (function(x){
    return (function() {
        this.displayImg(tags[x]);
    })
})(i);

// ...

JavaScript - 模块对象语法

1 个答案: