0

jQuery でフォト ギャラリーを作成したいのですが、そのためには、最初のサムネイルの不透明度を 1 に、他のすべてのサムネイルの不透明度を 0.5 にします。マウスがサムネイルの上にあるとすぐに、この 1 つのサムネイルの不透明度が1 になり、マウスを離すと、不透明度は 0.5 に戻ります。問題は、クリックしたサムネイルにこの「マウスオーバー」、「マウスアウト」コードが必要ないことです。したがって、私がしたことは次のとおりです。

var selector = $('.thumb:first');

それから

 $('.thumb').click(function() {
    selector = $(this);
  $(this).css('opacity','1');

$('.thumb').css('不透明度','0.5'); });

と

$('.thumb').mouseover(function() {
    if($(this) != selector){
    $(this).css('opacity','1');
    }
});

$('.thumb').mouseout(function() {
    if($(this) != selector){
    $(this).css('opacity','0.5');
    }
});

マウスが最後にクリックしたサムネイルから離れるとすぐに、サムネイルの不透明度が 1 ではなく 0.5 になります。

4

4 に答える 4

1

CSS で処理できるようですね。Seefirst-childまたはfirst-of-type疑似セレクター。このようなプレゼンテーション ロジックを JS から CSS に移動することで、将来、自分自身と仲間の開発者を助けることができます。

于 2012-12-29T21:04:55.783 に答える
1

selector != $(this)

これらはキーワードtrueで作成された個別のオブジェクト インスタンスであるため、常に と評価されます。newしたがって、同じ流れで、

$(this) != $(this)

も常に評価さtrueれます。

親指にクラスを追加して、そのように比較してみてください。

var classStr = $('.thumb:first').attr('class');

次に、イベント ハンドラーで次のようにします。

if ($(this).attr('class') !== classStr) {
    // elements are not the same
}
于 2012-12-29T21:09:48.093 に答える
0

クリックしたサムにクラスを追加し、マウスオーバー イベントでサムにクラスがあるかどうかを確認できます。

$('.thumb').click(function() {
    $(this).addClass('clicked');
    $(this).css('opacity','1');
});

$('.thumb').mouseover(function() {
    if (!$(this).hasClass("clicked")) {
        $(this).css('opacity','1');
    }
});

$('.thumb').mouseout(function() {
    if (!$(this).hasClass("clicked")) {
        $(this).css('opacity','0.5');
    }
});
于 2012-12-29T21:09:58.670 に答える
-1

JS:

$('.thumb:first').addClass("selected");

$('.thumb').click(function() {
  $('.thumb.selected').removeClass("selected");
  $(this).addClass("selected");
});

CSS:

.thumb { opacity: 0.5; }
.thumb:hover { opacity: 1; }
.thumb.selected { opacity: 1; }
.thumb.selected:hover { opacity: 1; }

</p>

于 2012-12-29T21:23:32.447 に答える