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