0

クリックしたときに横にテキストを表示したい画像のリストがあります。デフォルトの状態で画像の不透明度を 0.5 に設定しました。ユーザーが画像にカーソルを合わせると、不透明度が最大または 1 になります。

テキスト ボックスが開いている限り、画像の不透明度を 1 にします。

このフィドルリンクを表示すると、より良いアイデアを得ることができます。

私は自分のjavascriptでこれを試しましたが、うまくいきません:

$('.team-text .close').click(function () {
    $(this).parent('.team-text').hide();
});


$('.team-member .team-photo, .team-member .bio-button, .team-member-minor .team-photo, .team-member-minor .bio-button').on('click', function(){
  $(this).find('.team-text:visible').hide();
  $(this).find('.team-member img, .team-member-minor img').css('opacity','0.5');
});

$('.team-photo, .bio-button').on('click', function () {
   $('.team-text').hide();
   $(this).prevAll('.team-text:hidden').show();
   $(this).prevAll('.team-member img, .team-member-minor img').css('opacity','1');
});
4

2 に答える 2

2

「アクティブ」状態の div にcss クラス (例: active) を適用します。これにより、各項目の不透明度を手動で設定する必要がなくなります。.team-memberこれにより、物事がよりクリーンになり、将来のために保守しやすくなります。

編集: 以下の @Alexander の提案に従って、クラス名を変更しました。http://jsfiddle.net/Lh6xU/ここに彼のフィドルがあります

CSS

.team-member-minor img {
 opacity:.5; /* the default state for images; no need for jQuery */
}
.team-text {
display:none; 
}
/* "active" class */
.team-member-minor.active img {
opacity:1;
}

.active .team-text {
display:inline;
}

JS

$('.team-member-minor').on('click', function(){
     $(this)
      .addClass('active')
      .siblings('.team-member-minor')
      .removeClass('active');
}

// if a user "closes" the textbox, reset our team member

$('.team-text .close').click(function () {
   $(this).parent('.team-text').removeClass('active');
});
于 2013-03-11T20:05:44.093 に答える
1

.on('click')次の部分を次のように追加できます.team-photo,.bio-button。

$('img').removeAttr('style');
$(this).find('img').css({opacity:1});

これにより、既存の画像のスタイルタグ（不透明度を変更して追加）が削除され、クリックimgした画像の不透明度が1に設定されます。

テキスト部分を閉じるときに不透明度をリセットするには、次removeAttr('style');をクリックするだけです.close。

$('img').removeAttr('style');

これがあなたの望むものだと思います。jsFiddleも更新しました。

于 2013-03-11T19:56:03.123 に答える