Question

我有一堆可重复使用的下拉列表，所有行为都相同。页面加载时，它们已经在DOM中了：

<body>

    <div class="dd-list" id="myDD1">
        ... stuff
    </div>

    <div class="dd-list" id="myDD2">
        ... stuff
    </div>

</body>

但是当前行为并未附加到每个元素。他们只是坐在那里什么都不做。

使用Pure JS ，我希望能够做到这样的事情：

var lists = document.querySelectorAll('.dd-list');

lists.forEach(function(list, index) {
    list.init();
});

但我不确定如何编写方法init()，以便它可以使用简单的点表示法对每个list执行操作。我不需要将列表（或列表的引用）存储在内存中，这只是将行为附加到它们。

我有类似的东西：

// List behaviour 

(function(window) {

    function DDList(el) {
        var self = this;

        self._init(el);
    }

    DDList.prototype._init = function(el) {
        self.menu = el;
        self.list = self.menu.querySelector('ul');

        el.addEventListener('click', function(e) {
            console.log(self.list);    // Just for testing
        });
    }   

    ... and other methods       

    window.DDList = DDList;

})(window);


// Find the lists, initialize them

(function() {
    var lists = document.querySelectorAll('.dd-list');

    lists.forEach(function(list, index) {
        new DDList(list);
    });
})();

但是在对它们进行初始化之后，单击其中一个列表仅打印 second 列表中的列表项。我可以在每个初始化时打印信息，并且两者都分别初始化，但似乎第二次初始化会以某种方式覆盖第一次。

就像我提到的，我不需要（或想要）存储对任何东西的引用。这就是我选择new DDList(list);，反对var list1 = new DDList(list);

的原因

我正在寻找一些简单的东西，但比将addEventListener放在forEach中更优雅和可重复使用。

JS - 用简单的.init（）初始化DOM元素;方法？

0 个答案: