Question

我有一个JS函数，可以根据参数选择一些元素

function getElement() {
    var scope = document;

    this.by = function(data) {
        for (key in data) {
            if (key == 'id')    scope = scope.getElementById(data.id);
            if (key == 'tag')   scope = scope.getElementsByTagName(data.tag);
        }       
        return scope;
    }
}

function getEl(data) { return new getElement().by(data); }

这被称为getEl(id : 'divId', tag : 'span')，它会选择div'divId'中的所有跨距。

现在，我想创建另一个函数（在函数Element中），称为样式，它将改变以前所有选定跨度上的CSS。

像

这样的东西

function getElement() {
    var scope = document;

    this.by = function(data) {
        for (key in data) {
            if (key == 'id')    scope = scope.getElementById(data.id);
            if (key == 'tag')   scope = scope.getElementsByTagName(data.tag);
        }       
        return scope;
    }

    this.style = function(data) {
        console.log(data);
    }
}

我希望能够执行 getEl({id : 'divId', tag : 'span').style({display : 'none'})

之类的操作

但这似乎不起作用，我收到getEl({id: "divId", tag: "span"}).style is undefined错误。

ps：这只是为了学习目的，请不要建议使用jQuery或其他类似的框架！：）

亲切的问候！

Answer 1

getEl返回scope变量，该变量是DOM元素的列表，而不是对getElement的引用。您需要返回this才能执行new getElement().by(data).style()。

之类的操作

this.by = function(data) {
    for (key in data) {
        if (key == 'id')    scope = scope.getElementById(data.id);
        if (key == 'tag')   scope = scope.getElementsByTagName(data.tag);
    }       
    return this;
}

然后你可以getEl({id : 'divId', tag : 'span'}).style({display : 'none'})。

要获取scope变量，您可以添加以下内容：

this.elements = function(){
    return scope;
}

getEl({id : 'divId', tag : 'span'}).elements()将返回DOM元素列表。

Answer 2

我想通了，感谢Rocket：）

function getElement() {
    this.scope = document;

    this.get = function() {
        return this.scope;
    }

    this.by = function(data) {
        for (key in data) {
            if (key == 'id')    this.scope = this.scope.getElementById(data.id);
            if (key == 'tag')   this.scope = this.scope.getElementsByTagName(data.tag);

        }
        return this;
    }

    this.style = function(data) {
        console.log(typeof(this.scope));
        for (key in data) {
            if (this.scope.length) {
                for (i = 0; i < this.scope.length; i++) {
                    this.scope[i].style[key] = data[key];
                }
            }
            else {
                this.scope.style[key] = data[key];
            }
        }
        return this;
    }
}
function getEl(data) { return new getElement().by(data); }

适用于： getEl({id : "tara_content", tag : "div"}).style({display : "none"}); getEl({id : "tara_content"}).style({display : "none"}); getEl({tag : "div"}).style({display : "none"});

正如Mathias Bynens注意到by()可以返回一个元素数组或只返回一个元素，这就是为什么在style()我正在检查this.scope的长度。（我找不到任何强制类型的方法）。

感谢您的帮助！：）

连续的js方法

2 个答案: