Question

我已经建立了一个看起来像这样的数组：

coolnessGraph = new Array(
    [($pink),'Mr. Pink'],
    [200,'Mr. White'],
    [230,'Mr. Brown'],
    [300,'Mr. Black' ]

我没有输入与数组中的名称相关的整数，而是想用变量替换整数（即$pink代替100或其他），并通过变量控制变量一个jQuery UI Slider。我以前从未使用过其中的一个，并且会喜欢关于如何使用下面的UI Slider代码并让它控制我的$pink变量的一些指示。

$(function() {
    $("#slider-vertical").slider({
        orientation: "vertical",
        range: "min",
        min: 0,
        max: 100,
        value: 60,
        slide: function(event, ui) {
            $("#amount").val(ui.value + " %");
        }
    });

Answer 1

我想我会将数组更改为JSON对象并从中开始工作：

working fiddle

$(function() {
  var coolnessGraph = {};
  coolnessGraph.MrPink = 100;
  coolnessGraph.MrWhite = 200;
  coolnessGraph.MrBrown = 300;
  coolnessGraph.MrBlack = 400;

  $("#value").text(coolnessGraph.MrPink);

  $("#slider-vertical").slider({
    orientation: "vertical",
    range: "min",
    min: 0,
    max: 100,
    value: 100,
    slide: function(event, ui) {
        coolnessGraph.MrPink = ui.value;
        $("#value").text(coolnessGraph.MrPink);
    }
  });
});

和html

<div style="padding: 15px">
  <div id="slider-vertical"></div>
  <br />
  <div id="value">0</div>
</div>

Answer 2

使用($pink)设置数组时，它只会设置默认值，因此如果要更改数组中的值，则必须在更改滑块值时再次指定它。

您可以尝试将目标用作变量控制阵列，而不是这样做。

$Mr_pink = coolnessGraph[0];

然后你可以在滑动时分配它。

$("#slider-vertical").slider({
    orientation: "vertical",
    range: "min",
    min: 0,
    max: 100,
    value: $(pink),
    slide: function(event, ui) {
        $(Mr_pink)[0] = ui.value;
    }
});

设置jQuery UI Slider来控制变量

2 个答案: