Jquery在点击时改变div的不透明度答案

【问题标题】：Jquery change opacity of div on clickJquery在点击时改变div的不透明度
【发布时间】：2013-11-23 23:55:42
【问题描述】：

我已经阅读了有关此问题的各种问题，但我没有找到适合我的特定案例的解决方案。单击时，我需要更改 thumbUp 和 thumbDown div 的不透明度。为什么我的代码不起作用？

谢谢。

HTML

<body>
<div id="container">
    <div id="foto">
        <img src="images/feu.jpg">
    </div>
    <div id="descrizione">
        <p class="title">Feu d'artifice</p>
        <p>Giacomo Balla<br>
           1916-1917<br>
        </p>
        <div id="likeButtons">
            <p>Ti piace quest'opera?</p>
            <img id="thumbUp" src="images/thumbup.png">
            <img id="thumbDown" src="images/thumbdown.png">
        </div>
    </div>
    <div id="pulsanteOpera" class="pulsante" style="padding: 30px 20px 0 0;float:right;">
        <a href="#"></a>
    </div>    
</div>
</body>

CSS

#likeButtons{
position:relative;
right:-50%;
width:500px;
overflow:hidden;
font-weight:300;
margin-bottom:50px;
} 

#likeButtons p{
float:left;
}

#likeButtons img{
width:10%;
margin-bottom:30px;
padding-left:10px;
float:left;
cursor:pointer;
}

#thumbUp,#thumbDown{
opacity:0.6;
}

JQuery

<script>
    $(document).ready(function(e) {
        $('#pulsanteOpera').click(function(){
    $(this).toggleClass('pulsante').toggleClass('pulsanteRimuovi');
        });
    $('#thumbDown').click(function(){
            if($(this).css('opacity')==0.6)
        $(this).css('opacity','1.0');
        else
        $(this).css('opacity','0.6');
    });
    });
</script>

【问题讨论】：

而不是检查 CSS 属性的值，你应该只添加/删除一个类

标签： jquery onclick opacity

【解决方案1】：

我建议（尽管这与 Suganthan 的回答非常相似）使用 toFixed() 和 parseFloat()，它首先解析保存为 opacity 的当前值的字符串值，并将该值缩写为几乎 0.6 的不可预测（跨浏览器）长值到小数点后一位：

$('#thumbDown, #thumbUp').click(function(){
    $(this).css('opacity', function(i,o){
        return parseFloat(o).toFixed(1) === '0.6' ? 1 : 0.6;
    });
});

JS Fiddle demo.

不过，与上述解决方案相比，我建议改为使用特定的类来切换不透明度，而不必自己解析 CSS 属性值，使用以下方法：

$('#thumbDown, #thumbUp').click(function(){
    $(this).toggleClass('faded opaque');
});

加上（额外的）CSS：

.faded {
    opacity: 0.6;
}

.opaque {
    opacity: 1;
}

（另外，从#thumbUp/#thumbDown 按钮中删除opacity: 0.6; 以允许它工作，并在元素上设置适当的样式以开始，我已经添加 faded 的类）。

JS Fiddle demo.

修改后一种方法以确保“选择”一个元素取消选择另一个：

$('#thumbDown, #thumbUp').click(function(){
    $(this).parent().find('img').toggleClass('faded opaque');
});

JS Fiddle demo

当然，以上假设您已经适当地设置了初始类，以便一个具有opaque 类，另一个具有faded 类；但是，为了简化和只使用一个附加类：

$('#thumbDown, #thumbUp').click(function(){
    $(this).parent().find('img').toggleClass('opaque');
});

CSS：

#thumbUp, #thumbDown {
    opacity: 0.6; /* restored the default opacity here */
    position: relative;
}
#thumbUp.opaque, #thumbDown.opaque {
    opacity: 1;
}

JS Fiddle demo.

解决 OP 的最新评论：

最新的编辑不是我想要的，一开始两个divs 有opacity = 0.6。如果我点击 [thumbUp]，它会变得不透明，但如果我点击 thumbDown，thumbUp 的不透明度必须更改为 0.6，thumbDown 将变得不透明。

我建议从 img 元素中删除 opaque 类（与我之前的建议相反），然后使用以下内容：

$('#thumbDown, #thumbUp').click(function(){
    $(this).addClass('opaque').siblings('.opaque').removeClass('opaque');
});

JS Fiddle demo.

【讨论】：

我正在使用你的解决方案，你能帮我实现它以在 Firefox 中使用吗？
它适用于 id，而不是我认为的类。我使用 div 的 id 全部改回来，它正在工作，谢谢 ;)
@David Thomas +1 帮了我很多
我知道这与主要问题无关，但是如果选择了另一个，如何使两个 div 之一的不透明度返回 0.6？谢谢;)
最新的编辑不是我想要的，一开始两个 div 的不透明度 = 0.6。如果我点击 thumUp 它会变得不透明，但是如果我点击 thumbDown，thumbUp 的不透明度必须更改为 0.6，thumbDown 将变得不透明......是否足够清晰？ :)

【解决方案2】：

显然我不知道原因，让我找到，但这是有效的

$(document).ready(function(e) {
    $('#pulsanteOpera').click(function(){
       $(this).toggleClass('pulsante').toggleClass('pulsanteRimuovi');
    });
$('#thumbDown').click(function(){
    console.log($(this).css('opacity'))
       if(parseFloat($(this).css('opacity')).toFixed(1)==0.6)
            $(this).css('opacity','1.0');
        else
            $(this).css('opacity','0.6');
    });
});

【讨论】：

我不知道为什么，但这有效...为什么不透明度有这么奇怪的值？？
@The Condor 让我检查一下，在控制台中我得到了那个奇怪的值

【解决方案3】：

您可能无法正确读取opacity 属性，这可能会因浏览器而异。试试吧。

.clicked {
  opacity: 1.0;
}

$('#thumbDown').click(function(){
  $(this).toggleClass('clicked');
}

另外，尝试将.clicked 放在CSS 底部和#thumbDown 下方，将其作为优先事项。

【讨论】：

是的，我想你会遇到id 优先于class