更改未点击元素的不透明度

Question

我的网页上有一些元素，我希望当我单击其中一个元素时，其他元素（未单击的元素）的不透明度会发生变化。

这是一个元素的 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);
    });
});

Answer 1

首先：清理你的 HTML 元素！

第二：在我的演示中工作

$('.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});
});

应该在一个函数中完成，但您的 HTML 不清楚。因此，只需编写 2 个函数即可实现 100% 的工作和 100% 的绝对焦点元素

演示： http://jsfiddle.net/l2aelba/nq3CN/2/