可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

I've read various questions about this matter but I didn't found a solution for my particular case. I need to change opacity of the thumbUp and thumbDown divs when they are clicked. Why does my code not work?

Thank you.

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>

回答1:

I'd suggest (though this is very similar to Suganthan's answer) using toFixed() as well as parseFloat(), which first parses the string-value held as the current value of opacity, and abbreviates that value from the unpredictably (cross-browser) long value of almost 0.6 to one decimal place:

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

JS Fiddle demo.

In preference to the above solution, though, I'd suggest instead using specific classes to toggle the opacity, rather than having to parse the the CSS property-values themselves, using the following:

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

Coupled with the (additional) CSS:

.faded {
    opacity: 0.6;
}

.opaque {
    opacity: 1;
}

(Also, remove the opacity: 0.6; from the #thumbUp/#thumbDown buttons to allow this to work, and set the appropriate style on the elements to start with, I've added the class of faded to both).

JS Fiddle demo.

To amend the latter approach to ensure that 'selecting' one element deselects the other:

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

JS Fiddle demo

The above, of course, presumes that you've set the initial classes appropriately so that one has the opaque class and the other has the faded class; however, to simplify and use only one additional class:

$('#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.

To address the most recent comment from the OP:

The latest edit is not what I was looking for precisely, at the beginning the two divs have opacity = 0.6. if I click on [thumbUp] it becomes opaque, but if I click on thumbDown the opacity of thumbUp must change to 0.6 and thumbDown shall become opaque.

I'd suggest removing the opaque class from the img elements (contrary to my previous suggestion), and then using the following:

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

JS Fiddle demo.

回答2:

Obviously I don't know the reason, let me to find that but this is working

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

回答3:

You are probably having trouble reading the opacity property correctly and this could change based on browser. Try.

.clicked {
  opacity: 1.0;
}

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

Also, try making .clicked a priority by placing it at the bottom of your CSS and below #thumbDown.

Jquery change opacity of div on click

问题:

回答1:

回答2:

回答3:

收藏的人(0)

Jquery change opacity of div on click

问题:

回答1:

回答2:

回答3:

收藏的人(0)

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮