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/

更改未选中元素的不透明度

1 个答案: