如何在类的元素上应用javascript

Question

我的问题是我希望在两个元素上都应用.slim类。不仅仅是第一个

​

new SlimSelect({
  select: '.slim-select'
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/slim-select/1.27.0/slimselect.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slim-select/1.27.0/slimselect.min.css" rel="stylesheet"></link>

<form>
  <select class="slim-select" class="info__select">
    <option value="java" data-thumbnail="'https://orig00.deviantart.net/d5fa/f/2012/088/3/0/30e49c0ab37799728a5dfc28d92bbcb7-d4ubbj8.jpg'">Java</option>
    <option value="dot-net">.NET</option>
    <option value="php">PHP</option>
    <option value="c">C/C++</option>
    <option value="swift">Swift</option>
    <option value="android">Android dev</option>
    <option value="ruby">Ruby</option>
    <option value="python">Python</option>
    <option value="node">NodeJs</option>
    <option value="javascript">Javascript</option>
  </select>
  <br><br>

  <select class="slim-select" class="info__select">
    <option value="java" data-thumbnail="'https://orig00.deviantart.net/d5fa/f/2012/088/3/0/30e49c0ab37799728a5dfc28d92bbcb7-d4ubbj8.jpg'">Java</option>
    <option value="dot-net">.NET</option>
    <option value="php">PHP</option>
    <option value="c">C/C++</option>
    <option value="swift">Swift</option>
    <option value="android">Android dev</option>
    <option value="ruby">Ruby</option>
    <option value="python">Python</option>
    <option value="node">NodeJs</option>
    <option value="javascript">Javascript</option>
  </select>

</form>

​

Answer 1

slim select不是jquery插件，也不遵循jquery插件规则。

最好的解决方案是将new SlimSelect封装在一个循环中：

$(".slim-select").each((i, e) => {
  new SlimSelect({
    select: e
  })
});

快速浏览一下源代码就会发现，Slim Select使用了document.querySelector(info.select) --它总是返回单个元素，因此无法让SlimSelect通过一次调用应用于多个元素。

更新的代码片段：

​

//new SlimSelect({
//  select: '.slim-select'
//})

$(".slim-select").each((i, e) => {
  new SlimSelect({
    select: e
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/slim-select/1.27.0/slimselect.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slim-select/1.27.0/slimselect.min.css" rel="stylesheet"></link>

<form>
  <select class="slim-select" class="info__select">
    <option value="java" data-thumbnail="'https://orig00.deviantart.net/d5fa/f/2012/088/3/0/30e49c0ab37799728a5dfc28d92bbcb7-d4ubbj8.jpg'">Java</option>
    <option value="dot-net">.NET</option>
    <option value="php">PHP</option>
    <option value="c">C/C++</option>
    <option value="swift">Swift</option>
    <option value="android">Android dev</option>
    <option value="ruby">Ruby</option>
    <option value="python">Python</option>
    <option value="node">NodeJs</option>
    <option value="javascript">Javascript</option>
  </select>
  <br><br>

  <select class="slim-select" class="info__select">
    <option value="java" data-thumbnail="'https://orig00.deviantart.net/d5fa/f/2012/088/3/0/30e49c0ab37799728a5dfc28d92bbcb7-d4ubbj8.jpg'">Java</option>
    <option value="dot-net">.NET</option>
    <option value="php">PHP</option>
    <option value="c">C/C++</option>
    <option value="swift">Swift</option>
    <option value="android">Android dev</option>
    <option value="ruby">Ruby</option>
    <option value="python">Python</option>
    <option value="node">NodeJs</option>
    <option value="javascript">Javascript</option>
  </select>

</form>

​