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

Posted 2023-05-08

【中文标题】更改未点击元素的不透明度

【英文标题】：Change Opacity of an Unclicked Element

【发布时间】：2013-03-16 23:01:45

【问题描述】：

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

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

【问题讨论】：

这很奇怪，你的 jQuery 代码对我来说看起来很不错？

但是真的不行……

这是一个错字：$(this).child().$('.element-image-front')？我很确定链式方法中不应该有另一个$。

像这样： $('.link').click(function() $('.element').siblings().stop().animate(opacity: 0.4, 300 ); $('.link').click(function() $not('.element').stop().animate(opacity: 1.0, 300); ); );它靠近工作。但所有元素都变为 0.4 不透明度。我不知道如何获取点击链接的父 div...

【参考方案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/

【讨论】：

感谢您的帮助。但是，单击的元素是：class="link"（因为我的 .element 上有悬停效果）。不透明度可以应用于整个元素：class="element"。所以我需要获取点击的 class="link"...

的父类或id

我的 HTML 很干净！这是因为我有一个点击计数，一个 3D 翻转效果，一个叠加效果和其他东西......但是，当元素被点击时，这是被点击的 class="link"。我需要应用孩子 class="element 或他的 id 的不透明度。我不知道如何点击 div class="link" 的父项

$(".link").parents(".element");（查找父类名 ELEMENT 直到找到，最接近）

谢谢！像这样： $('.link').click(function() $(this).parents(".element").siblings().stop().animate(opacity: 0.4, 300); $ ('.link').click(function() $not(this).stop().animate(opacity: 1.0, 300); ); );有用。但是当我点击另一个元素时，它保持在 0.4 的不透明度。

jsfiddle.net/l2aelba/DrFvX/2 @lolo 我不知道你想要什么，点击.link将不透明度设置为0.3或1？