javascript - jQuery滑块根据滑块值更改img

Question

我试图让我的滑块值来识别它的值并更改图像。这是对 jquery 的默认功能的赞许，不赞成的概念。因此，如果用户向左滑动（大拇指向下），请更改 img css(opacity) 以显示哪个被选中。

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

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

我在这里做了一个小提琴。如何使滑块值生效？

我知道我可能应该问/提出另一个问题，为什么滑块不会生成多个。但如果你有什么建议，我也会采纳。

感谢您提前提供帮助。

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');
}

演示

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');
        }
      }
    });