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

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>