0

当我更改一个滑块中的值时，它会同时更新，我该如何解决？顺便说一句，我想从具有当前数组索引的元素中获取值并使用它，这可能吗，还是存在更好的解决方案？ 

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,

   update: function (args) {
      $('.value').html(`${args.value} %`);
   }

}));
<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="container">
    <div class="slider"></div>
    <div class="value">0 %</div>
</div>

<div class="container">
    <div class="slider"></div>
    <div class="value">0 %</div>
</div>

4

1 回答 1

0

值在所有元素中更新的原因是，使用了通用选择器$('.value')，它将在所有元素中更新。取而代之的是，您可以根据当前目标更新元素。

同样要从元素中设置值，您可以获取该值并应用它。检查以下修改后的演示：

const scArr = Array.from($('.slider'));
scArr.forEach(el => $(el).roundSlider({
   radius: 80,
   circleShape: "half-left",
   sliderType: "min-range",
   showTooltip: false,
   width: 10,
   min: 0,
   max: 200,
   
   svgMode: true,
   
   value: $(el).attr("data-value"),

   valueChange: function (args) {
      var slider = args.control;
      slider.parent().find('.value').html(`${args.value} %`);
   }

}));
<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="container">
    <div class="slider" data-value="50"></div>
    <div class="value">0 %</div>
</div>

<div class="container">
    <div class="slider" data-value="120"></div>
    <div class="value">0 %</div>
</div>

于 2020-10-05T08:00:43.593 回答