jquery更改点击div上的不透明度

我已阅读关于此问题的各种问题，但我没有找到针对特定情况的解决方案。我需要在点击时更改thumbUp和thumbDown div的不透明度。为什么我的代码不工作？jquery更改点击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>

来源

2013-11-23 The Condor

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

我建议（虽然这是非常相似的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解决最近的评论：

最新的编辑是不是我要找的正是，在一开始两个div■找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。

来源

2013-11-23 15:10:19

好的解决方案，对我来说可读性较差，但更紧凑;） –

它不起作用在Firefox上:( –

我现在使用你的解决方案，你能帮我实现它在Firefox中使用吗？ –

你可能有troubl e正确读取opacity属性，这可能会基于浏览器进行更改。尝试。

.clicked { 
    opacity: 1.0; 
} 

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

此外，尝试通过将其放置在你的CSS的底部，下方#thumbDown使.clicked一个优先事项。

来源

2013-11-23 14:53:48 beautifulcoder

不，这也行不通。 –

是的，我想你会碰到'id'作为'class'的优先级 – beautifulcoder

很显然，我不知道原因，让我发现，但这是工作

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

来源

2013-11-23 15:00:55

我不知道为什么，但是这个工程...为什么这个奇怪的值在不透明？ –

@神鹰让我检查，在控制台中我得到了奇怪的值 –

它不适用于Firefox :( –

jquery更改点击div上的不透明度

回答

相关问题