0

一个元素没问题，但是这里抛出错误“el.roundSlider 不是函数”，Jquery 在主 js 文件之前连接，与 Jquery .each 相同

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>

4

2 回答 2

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

于 2020-09-17T10:57:00.660 回答
1

直接使用jquery类选择器即可

$('.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>

于 2020-09-17T10:59:21.113 回答