javascript - 防止每个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/

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

您确实应该将滑块的“id”替换为“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');
    }
  }
});