The*_*dor 0 jquery onclick opacity
我已经阅读了有关此事的各种问题,但我没有找到针对我的具体案例的解决方案.我需要在单击时更改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>
我建议(尽管这与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;
});
});
但是,与上述解决方案相比,我建议使用特定的类来切换不透明度,而不是必须使用以下方法解析CSS属性值本身:
$('#thumbDown, #thumbUp').click(function(){
$(this).toggleClass('faded opaque');
});
再加上(附加)CSS:
.faded {
opacity: 0.6;
}
.opaque {
opacity: 1;
}
(另外,opacity: 0.6;从#thumbUp/ #thumbDown按钮中移除以允许它工作,并在元素上设置适当的样式开始,我已经添加了faded两个类).
修改后一种方法以确保"选择"一个元素取消选择另一个元素:
$('#thumbDown, #thumbUp').click(function(){
$(this).parent().find('img').toggleClass('faded opaque');
});
当然,上面假设您已经适当地设置了初始类,以便一个人拥有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;
}
要解决OP的最新评论:
最新的编辑是不是我要找的正是,在一开始两个
div■找opacity = 0.6.如果我点击[thumbUp]它变得不透明,但如果我点击thumbDown,thumbUp的不透明度必须改为0.6,thumbDown将变为不透明.
我建议opaque从img元素中删除该类(与我之前的建议相反),然后使用以下内容:
$('#thumbDown, #thumbUp').click(function(){
$(this).addClass('opaque').siblings('.opaque').removeClass('opaque');
});
| 归档时间： |
|
| 查看次数： |
18693 次 |
| 最近记录： |