0

ユーザーが 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');
    }
  }
});

ここでフィドル

みんなありがとう！

4

3 に答える 3

5

マークアップを変更する必要があります。同じ id を持つ 3 つのアイテムをページに含めることはできません。うまくいくよ

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/

于 2013-01-14T21:16:40.933 に答える
0

スライダーの「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');
    }
  }
});
于 2013-01-14T21:23:06.400 に答える
0

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');
        }
    }
});
于 2013-01-14T21:07:03.037 に答える