0

メイン div があり、メイン div 内に div があり、メイン div 内にあるすべての div は .testimonial で分類され、testimonial の各 div にはその中に画像があります...

私が望んでいたのは、たとえば、画像の1つにカーソルを合わせると、div内のすべての画像の不透明度が60％になり、選択した画像の不透明度が100％に保たれることです。以下のスクリプトを使用すると、すべてがうまく機能します。しかし、それを行うためのより良い方法があるかどうか疑問に思っていましたか？または以下のスクリプトを強化するには？私が尋ねている唯一の理由は、以下のスクリプトでわかるように、仕事をするための関数が 2 つあるからです! オンリーワンにできないの？

//Testimonials Animation//
    $(".testimonial, .plan").hover(function () {
        $(".testimonial, .plan").addClass('itemNotActive');
        $(this).removeClass('itemNotActive').addClass('itemActive');
    },

    function () {
        $(".testimonial, .plan").removeClass('itemNotActive');
        $(this).removeClass('itemActive');
    });
4

4 に答える 4

0

あなたが両方を持っている理由はactive、notActive両方とも特別なスタイルを持っているからだと思います。次のようなことができます。

http://jsfiddle.net/9tr72/

$('.testimonial').on('mouseenter', function() {
    $('.testimonial').not(this).addClass('not-active');
    $(this).addClass('active');
}).on('mouseleave', function() {
    $('.testimonial').removeClass('active not-active');
});

それでも、1行しか保存されませんでした。イベントごとに異なる処理を行う必要があるため、2 つのハンドラーが必要です。

于 2013-11-06T18:55:38.293 に答える
0

最初に行うことの 1 つは、jQuery をキャッシュすることです。しかし、それとは別に、2 つの異なることを行う 2 つの異なるイベントがあるため、2 つの関数が必要です。両方のイベントを処理するハイブリッド関数があったとしても、意味がなく、コードが難読化されるだけです。

var hoverBoxes = $(".testimonial, .plan");
hoverBoxes.hover(
    function () {
        hoverBoxes.not(this).addClass('itemNotActive');
        $(this).addClass('itemActive');
    },
    function () {
       hoverBoxes.removeClass('itemActive').removeClass('itemNotActive');
    });
);
于 2013-11-06T19:37:38.543 に答える
0 
 $(".testimonial, .plan").hover(function () {
        $(this).removeClass('itemNotActive').addClass('itemActive');
    },
    function () {
        $(this).removeClass('itemActive').addClass('itemNotActive');;
    });
于 2013-11-06T18:46:59.957 に答える
0

編集：これはあなたが望んでいるものです。すべての証言は、ホバーするまでデフォルトの状態 (itemActive) であり、ホバーされたアイテムだけに itemActive が適用されます。itemNotActive をデフォルトの状態にします。

$(".testimonial, .plan").hover(function () {
    $(".testimonial:not("+this+")").removeClass('itemActive');
}, function () {
    $(".testimonial").addClass('itemActive');
});
于 2013-11-06T18:43:50.770 に答える