我如何将 .roundSlider() 应用于 Array 的所有元素？

Question

只有一个元素没问题，但这里抛出错误“el.roundSlider 不是函数”，Jquery 在主 js 文件之前连接，与 Jquery 一样。 =12=]

const scArr = Array.from($('.slider'));

scArr.forEach(el => el.roundSlider({
    radius: 80,
    circleShape: "half-left",
    sliderType: "min-range",
    showTooltip: false,
    value: 150,
    width: 10,
    min: 0,
    max: 200
 }));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/roundSlider/1.6.1/roundslider.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/roundSlider/1.6.1/roundslider.css" integrity="sha512-XO53CaiPx+m4HUiZ02P4OEGLyyT46mJQzWhwqYsdqRR7IOjPuujK0UPAK9ckSfcJE4ED7dT9pF9r78yXoOKeYw==" crossorigin="anonymous" />

<div class="slider"></div>
<div class="slider"></div>
<div class="slider"></div>

Answer 1

$(el) 似乎可以解决问题：

const scArr = Array.from($('.slider'));

scArr.forEach(el => $(el).roundSlider({
    radius: 80,
    circleShape: "half-left",
    sliderType: "min-range",
    showTooltip: false,
    value: 150,
    width: 10,
    min: 0,
    max: 200
 }));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/roundSlider/1.6.1/roundslider.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/roundSlider/1.6.1/roundslider.css" integrity="sha512-XO53CaiPx+m4HUiZ02P4OEGLyyT46mJQzWhwqYsdqRR7IOjPuujK0UPAK9ckSfcJE4ED7dT9pF9r78yXoOKeYw==" crossorigin="anonymous" />

<div class="slider"></div>
<div class="slider"></div>
<div class="slider"></div>

jquery array 中的每个元素都不是 jquery 对象，我认为它实际上是一个节点元素。在浏览器中试试这个：$('p')[0] instanceof Element

Answer 2

直接使用jqueryclass选择器

$('.slider').roundSlider({
  radius: 80,
  circleShape: "half-left",
  sliderType: "min-range",
  showTooltip: false,
  value: 150,
  width: 10,
  min: 0,
  max: 200
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/roundSlider/1.6.1/roundslider.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/roundSlider/1.6.1/roundslider.css" integrity="sha512-XO53CaiPx+m4HUiZ02P4OEGLyyT46mJQzWhwqYsdqRR7IOjPuujK0UPAK9ckSfcJE4ED7dT9pF9r78yXoOKeYw==" crossorigin="anonymous" />

<div class="slider"></div>
<div class="slider"></div>
<div class="slider"></div>

我如何将 .roundSlider() 应用于 Array 的所有元素？

How can i apply .roundSlider() to all elements of Array?

javascript

jquery

round-slider