Question

我正在尝试让我的滑块值识别它的值并更改图像。它是jquery默认功能的竖起大拇指，竖起大拇指的概念。因此，如果用户向左滑动（向下竖起），请更改img css（不透明度）以显示已选择的内容。

我认为这样就足够了，但它实际上完全消除了滑块。

if ui.value >= 51{
  $('img.up').css('opacity','.8');
  alert('cool');
}
if ui.value <= 49{
    $('img.down').css('opacity','.8');
    alert('too bad');
}

我做了fiddle here。如何让滑块值生效？

我知道我应该问/为什么滑块不能以倍数产生另一个问题。但如果您有任何建议，我也会接受。

先谢谢你的帮助。

Answer 1

您忘了在if声明中添加括号。

$('img.up, img.down').css('opacity','.4');
if (ui.value >= 51) {
  $('img.up').css('opacity','.8');
}
if (ui.value <= 49) {
  $('img.down').css('opacity','.8');
}

DEMO

Answer 2

我已经更新了你的小提琴。如果我没有错，这就是你想要的最终结果。试试这个代码并检查小提琴。

$("#slider").slider({
 value:50,
 min: 0,
 max: 100,
 step: 50,
 slide: function( event, ui ) {
 if (ui.value >= 51){
     $('img.up').css('opacity','.8');
     $('img.down').css('opacity','.4');  
 }
 if (ui.value <= 49){
    $('img.down').css('opacity','.8');
    $('img.up').css('opacity','.4');
 }
}
});

Answer 3

你的if语句缺少括号

$("#slider").slider({
      value:50,
      min: 0,
      max: 100,
      step: 50,
      slide: function( event, ui ) {
        if (ui.value >= 51){
          $('img.up').css('opacity','.8');
          alert('cool');
        }
        if (ui.value <= 49){
            $('img.down').css('opacity','.8');
            alert('too bad');
        }
      }
    });

JQuery滑块根据滑块值更改图像

3 个答案: