1

Web ページにいくつかの要素があり、要素の 1 つをクリックすると、他の要素 (クリックされていない要素) の不透明度が変更されます。

1 つの要素の HTML コードは次のとおりです。

<div class="element hover download" id="_4>
    <div class="front">
        <div class="element-image-front">
            <img src="./Post thumbnail images/raspberryPiboard.JPG"/>
        </div>
    </div>
    <div class="back">
        <a class="link" href="#/portfolio/chicken.html" onclick="gestionClic('compteur11');"><div class="element-image-back">
        <div class="element-image-back">
            <img src="./Post thumbnail images/raspberryPiboard.JPG"/>
        </div>
        </a>
    </div>
</div>

要素をクリックすると、これがclass="link"クリックされます。

私はこれを試しましたが、うまくいきません：

$('.link').click(function() {
    $('.element').siblings().stop().animate({opacity: 0.4}, 300);
    $('.link').click(function() {
        $not('.element').stop().animate({opacity: 1.0}, 300);
    });
});
4

1 に答える 1

0

最初に: HTML 要素をクリーンアップします。

2番目：私のデモで働く

$('.element > img').click(function () {
    $(this).animate({opacity:0.4}).siblings().animate({opacity:1});
});

HTMLを次のようにクリーンアップした後...

<div class="element">
    <img src="{SRC}">
    <img src="{SRC}">
</div>

したがって、 .siblings()を使用できます

デモ: http://jsfiddle.net/l2aelba/nq3CN/

クリーンアップされていない HTML を本当に使用したい場合は、次のようにしてください...

$('.element img').click(function () {
     $('.element').find("img").not(this).animate({opacity:1});
    $(this).animate({opacity:0.4});
});

デモ: http://jsfiddle.net/l2aelba/nq3CN/1/

あなたの場合の例：

$('.element > .back > .link').click(function () {
    $(this).animate({opacity:1});
    $(this).parents(".element").find(".front > .element-image-front").animate({opacity:0.3});
});

別をクリックします:

$('.element > .front > .element-image-front').click(function () {
    $(this).animate({opacity:1});
    $(this).parents(".element").find(".back > .link").animate({opacity:0.3});
});

1 つの関数で実行する必要がありますが、HTML が不明確です。したがって、100% の作業と 100% の絶対フォーカス要素に対して 2 つの関数をコーディングするだけです

デモ: http://jsfiddle.net/l2aelba/nq3CN/2/

于 2013-03-26T23:52:14.073 に答える