Question

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

Selectr插件： 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);  
});

演示

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

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

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

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

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

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

2 个答案: