2

当我滑动每个滑块时，我希望同一页面的每个滑块都有自己的值。

当我滑动其中一个时，每个滑块的“滑块块”按计划作为条件背景颜色工作，但所有滑块的值都相同。

这是我的 JS 代码：

$(document).ready(function() {
  $('.slider').slider({
    value: 5,
    min: 1,
    max: 10,
    step: 1,
    slide: function( event, ui ) {
      $( ".ui-slider-handle" ).text(ui.value);
      switch(ui.value){
        case 1: { $(this).css('background', 'darkred'); break;}
        case 2: { $(this).css('background', 'red'); break;}
        case 3: { $(this).css('background', 'orange'); break;}
        case 4: { $(this).css('background', 'gold'); break;}
        case 5: { $(this).css('background', 'yellow'); break;}
        case 6: { $(this).css('background', '#AAFF00'); break;}
        case 7: { $(this).css('background', 'lime'); break;}
        case 8: { $(this).css('background', 'cyan'); break;}
        case 9: { $(this).css('background', '#00AAFF'); break;}
        case 10: { $(this).css('background', 'blue'); break;}
      }
    }
  });
  $(".ui-slider-handle").val($('.slider').slider( "value" ));
});

这是 JSfiddle 中的代码：http: //jsfiddle.net/Arkl1te/Wrq3H/

有没有办法解决这个问题？我感谢您的帮助！

4

3 回答 3

2

并不是它们具有相同的值，问题是每次发生幻灯片时您都在更新两个句柄。可能的修复：http: //jsfiddle.net/Wrq3H/3/

//change text for current's slider handle only
        $(this).children(".ui-slider-handle").text(ui.value);
于 2013-05-21T23:06:48.610 回答
0

您需要为每个滑块创建一个单独的值参数。它们引用相同的变量，因此基于最新值将步骤应用于两者。尝试类似：

valueone = 5,
valuetwo = 5,
/* ... other content ... */

$(".ui-slider-handle").val($('#slider-1').slider( "valueone" ));
$(".ui-slider-handle").val($('#slider-2').slider( "valuetwo" ));
于 2013-05-21T23:04:14.360 回答
0

在幻灯片功能中，您需要将选择器从所有元素更改".ui-slider-handle"为引发幻灯片事件的元素中的子元素：

$(this).children( ".ui-slider-handle" ).text(ui.value);

该修复将允许您使用许多滑块而不更改幻灯片示例http://jsfiddle.net/cVUp3/1/的功能

于 2013-05-21T23:10:26.430 回答