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

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

谢谢。

HTML

 
 
  
 
 
Feu d'artifice
 
Giacomo Balla
 1916-1917
 
 
 
Ti piace quest'opera?
   
 
 
  
 
  

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的

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

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小提琴演示 。

但是，优先考虑上述解决方案，我建议使用特定的类来切换不透明度，而不是必须使用以下内容解析CSS属性值本身：

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

再加上（附加）CSS：

 .faded { opacity: 0.6; } .opaque { opacity: 1; } 

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

JS小提琴演示 。

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

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

JS小提琴演示

当然，上面假设您已经适当地设置了初始类，以便一个具有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小提琴演示 。

为了解决OP的最新评论：

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

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

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

JS小提琴演示 。

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下面。