javascript - jQuery中防止每个img都受到影响

Question

当用户滑动 jQuery Slider 时，它会影响每个图像。如何仅更改与该 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/