生成具有动态最小值和最大值的动态jQuery滑块

时间:2013-02-14 17:29:10

标签: javascript jquery-ui

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

[jsFiddle Link] 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);
              }
          });
      }
   });
});

具有讽刺意味的是,如果我在滑块的最小值和最大值内插入硬编码数字,它可以正常工作。但是价值(根据警报框)似乎是正确的。我错过了什么?我知道这可能是一个简单的答案,但我只是有一个大脑痉挛。

P.S。作为一个副作用,我还希望自动完成功能在您将焦点移到滑块时显示“标签”而不是“数据”,但它似乎没有这样做。但这不是什么大问题。

1 个答案:

答案 0 :(得分:0)

这是因为您的JSON数据是一个字符串,除去这些值的引号 e.g。

{
      "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" ) );,以便在滑块的初始加载时显示一个数字,这对于您的示例来说不是必需的。