选择器插件不适用于多个选择实例

Question

我正在使用一个选择框JS插件来设置选择框的样式。当页面上有多个选择框实例时，插件似乎没有启动。

选择器插件：https://github.com/Mobius1/Selectr

演示：https://jsbin.com/haxamipizo/edit?html,js,output

这是我根据文档初始化插件的方式：

new Selectr('.selecting');

我错过了什么？这是一个错误吗？

Answer 1

您使用的库在传入选择器字符串时使用 querySelector（）。

https://github.com/Mobius1/Selectr/blob/master/src/selectr.js#L963

var Selectr = function(el, config) {
    //....
    this.el = el;
    // CSS3 selector string
    if (typeof el === "string") {
        this.el = document.querySelector(el);
    }

这意味着它只会抓取匹配的第一个元素。为了启动所有元素，您必须自己循环访问它们，并在每个元素上调用new Selectr()。

document.querySelectorAll('.selecting').forEach(element=>{
  new Selectr(element);  
});

演示

document.querySelectorAll('.selecting').forEach(element => {
  new Selectr(element);
});

<select class="selecting">
	<option vlaue="value-1">Value 1</option>
	<option vlaue="value-2">Value 2</option>
	<option vlaue="value-3">Value 3</option>
	...
</select>
<div class="divider">
  <select class="selecting">
	<option vlaue="value-1">Value 4</option>
	<option vlaue="value-2">Value 5</option>
	<option vlaue="value-3">Value 6</option>
	...
</select>
  <div class="divider">
    <select class="selecting">
	<option vlaue="value-1">Value 6</option>
	<option vlaue="value-2">Value 7</option>
	<option vlaue="value-3">Value 8</option>
	...
</select>
    <link href="https://unpkg.com/mobius1-selectr@latest/dist/selectr.min.css" rel="stylesheet" type="text/css">
    <script src="https://unpkg.com/mobius1-selectr@latest/dist/selectr.min.js" type="text/javascript"></script>

Answer 2

然后，您可以通过将对选择框的引用作为第一个参数传递来实例化选择器...（来自 Selectr github）

如果您将为每个选择标签而不是集合使用 Selectr 对象，看起来它会对您有用。

因此，在 html 中将类名更改为 id，并创建多个选择器对象。

new Selectr('#selecting1');
new Selectr('#selecting2');
new Selectr('#selecting3');