使用动态最小值和最大值生成动态 jQuery 滑块

Question

我有一个项目，要求最终用户选择每位摄影师不同的摄影师和相关卷号（数据由页面加载时的 JSON 数据库调用引入并放入 Javascript 数组中 - 以便快速显示值）。我已经创建了一个包含我需要的所有内容的 jsFiddle，但是动态创建的滑块在创建后不会移动。我确信它与最小值和最大值有关，但它“似乎”是正确的。自动完成部分仅显示摄影师选择，然后从现有 HTML 元素动态创建其下方的滑块。我已经删除了很多我用来解决问题的基本代码。

[jsFiddle 链接]http://jsfiddle.net/sN63W/2/

(Ommiting data array named 'Photographer' - But it is in the jsFiddle Link)

$(function () {
   $("#photographer-label").autocomplete({
      minLength: 0,
      source: Photographer,
      focus: function (event, ui) {
          $('#photographer-label').val(ui.item.label);
          return false;
      },
      select: function (event, ui) {
          $('#photographer').val(ui.item.value);
          $('#photographer-label').val(ui.item.label);
          var slider_min = ui.item.rollnum_from;
          var slider_max = ui.item.rollnum_to;
          alert('Selected Rolls: ' + slider_min + ' : ' + slider_max); // For Debugging
          $('#rollnum-slider').slider({
              min: slider_min, // ui.item.rollnum_from,
              max: slider_max, // ui.item.rollnum_to,
              change: function (event, ui) {
                  $('#rollnum').val(ui.value);
              }
          });
      }
   });
});

具有讽刺意味的是，如果我在滑块的最小值和最大值中插入一个硬编码数字，它就可以正常工作。但是这些值（根据警告框）似乎是正确的。我错过了什么？我知道这可能是一个简单的答案，但我只是脑筋急转弯。

附：作为一个附带问题，当您将焦点移到滑块上时，我还希望自动完成显示“标签”而不是“数据”，但它似乎没有这样做。但这没什么大不了的。

Answer 1

这是因为你的 JSON 数据是一个字符串，去掉那些值的引号 例如

{
      "photographer_id": "2",
          "label": "Tommy Stay (TS)",
          "value": "TS",
          "rollnum_from": 1,
          "rollnum_to": 10
}

代替

{
      "photographer_id": "2",
          "label": "Tommy Stay (TS)",
          "value": "TS",
          "rollnum_from": "1",
          "rollnum_to": "10"
}

这里是 Jsfiddle，

http://jsfiddle.net/ufv9T/1/

注意：我将“更改”更改为“幻灯片”并添加了“值”和 $( "#rollnum" ).val( $( "#rollnum-slider" ).slider( "value" ) );，以便在滑块的初始加载时显示一个数字，这对于您的示例工作来说不是必需的。