Question

我需要将jQuery roundSlider值存储在一个变量中。滑块选项如下所示：

$("#slider").roundSlider({
    sliderType: "min-range",
    radius: 125,
    value: 0,
    circleShape: "pie",
    startAngle: 315,
    width: 12,
    handleSize: "+10",
    mouseScrollAction: true,
    editableTooltip: false,
    tooltipFormat: function (e) {
      let val = e.value;
      return `
      <div class="slider-content">
        <img class="slider-img" src="/img/brightness-control.png" alt="Brightness control icon"> ${val + "%"}
        <span class="slider-text">Brightness</span>
       </div>`;
  }
});

这就是我试图获取滑块值的方法：

var testvalue = $("#slider").roundSlider("getValue")
console.log(testvalue);

但是，这不起作用，它仅显示初始值为0，但不会更改值状态。有关如何执行此操作的任何想法？

Answer 1

除非您也将其包装在一个事件中，否则为获得该值而发布的代码仅在开始时（首次创建时）运行，因此该值始终为0。

请参见下文，其中我将click事件附加到了按钮上，以报告该值。

编辑： 我已将roundSlider对象分配给变量slider。现在可以随时使用`slider.roundSlider（“ getValue”）调用它。

问题（要实现的目标）是没有存储该值的变量。 roundSlider("getValue");正在调用roundSlider对象内部的函数； "getValue"是一个自变量，将函数告知return value;。因此，您没有什么可以真正获得其浅表副本并获得动态值的。您必须使用roundSlider();函数，并传入"getValue"或"setValue"字符串-作为参数-使其返回值。

roundSlider对象甚至似乎都没有存储数字-它会动态计算数字，进行魔术处理，然后“关闭”。在我的第二个片段中可以看到“自动化”这种行为的唯一方法。

var slider = $("#slider").roundSlider({
  sliderType: "min-range",
  radius: 125,
  value: 0,
  circleShape: "pie",
  startAngle: 315,
  width: 12,
  handleSize: "+10",
  mouseScrollAction: true,
  editableTooltip: false,
  tooltipFormat: function(e) {
    let val = e.value;
    return `
      <div class="slider-content">
        <img class="slider-img" src="/img/brightness-control.png" alt="Brightness control icon"> ${val + "%"}
        <span class="slider-text">Brightness</span>
       </div>`;
  } 
});


$('button#btn').on('click', function() {
  console.log(slider.roundSlider("getValue"))
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/roundSlider/1.3.2/roundslider.min.css" rel="stylesheet" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/roundSlider/1.3.2/roundslider.min.js"></script>

<div id="slider"></div>

<button id="btn">Value</button>

这会在每次滑块受到影响时使用slider.on('change', () => {...}自动更改变量（发生在mouseup上）。

var slider = $("#slider").roundSlider({
  sliderType: "min-range",
  radius: 125,
  value: 0,
  circleShape: "pie",
  startAngle: 315,
  width: 12,
  handleSize: "+10",
  mouseScrollAction: true,
  editableTooltip: false,
  tooltipFormat: function(e) {
    let val = e.value;
    return `
      <div class="slider-content">
        <img class="slider-img" src="/img/brightness-control.png" alt="Brightness control icon"> ${val + "%"}
        <span class="slider-text">Brightness</span>
       </div>`;
  }
});

var sliderValue = slider.roundSlider("getValue");

slider.on('change', () => {
  sliderValue = slider.roundSlider("getValue");
  console.log(sliderValue);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/roundSlider/1.3.2/roundslider.min.css" rel="stylesheet" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/roundSlider/1.3.2/roundslider.min.js"></script>

<div id="slider"></div>

如何将jQuery roundslider值存储在变量中

1 个答案: