0

我有一个项目，要求最终用户选择每位摄影师不同的摄影师和相关卷号（数据由页面加载时的 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);
              }
          });
      }
   });
});

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

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

4

1 回答 1

0

这是因为您的 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" ) );以便在滑块的初始加载时显示一个数字，这不是您的示例工作所必需的。

于 2013-02-14T17:49:09.950 回答