Question

当用户滑动jQuery Slider时，它会影响每个图像。如何仅更改与该滑块相关的图像？

我试过了： $(this).closest('img.down')和$(this).siblings('img.down')

$("#slider").slider({
  value:50,
  min: 0,
  max: 100,
  step: 50,
  slide: function( event, ui ) {
    $('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');
    }
  }
});

Fiddle here

谢谢你们！

Answer 1

您需要对标记进行更改， 您在页面中不能包含三个具有相同ID 的项目。你可以做到

class="slider"

将CSS的初始化移到函数外部，然后遍历标记以获得正确的图像：

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

http://jsfiddle.net/psybJ/9/

Answer 2

siblings对我很好：http://jsfiddle.net/psybJ/8/

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

Answer 3

你真的应该用滑块替换“class”和“class”。如果你这样做，那么这段代码将正常工作：

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

防止每个img在jQuery中受到影响

3 个答案: