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

Generating Dynamic jQuery Slider with dynamic min and max values

本文关键字：动态 最大值 jQuery Slider 最小值      更新时间：2023-09-26

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

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

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

因为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"
}

这是Jsfidle，

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

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

相关文章：