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

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

在这里小提琴

多谢你们!

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/