Question

我已经阅读了有关此事的各种问题，但我找不到针对我的具体案例的解决方案。我需要在单击时更改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>

Answer 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;
}

（另外，从opacity: 0.6; / #thumbUp按钮中删除#thumbDown以允许此操作，并在元素上设置相应的样式以开始，我将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的最新评论：

最新的编辑不是我正在寻找的，一开始两个div有opacity = 0.6。如果我点击[thumbUp]它会变得不透明，但是如果我点击thumbDown，thumbUp的不透明度必须变为0.6，thumbDown将变为不透明。

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

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

JS Fiddle demo

Answer 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');
    });
});

Answer 3

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

.clicked {
  opacity: 1.0;
}

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

另外，请尝试将.clicked置于CSS的底部且#thumbDown下方，将{{1}}作为优先级。

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

3 个答案: