我有两个div(A和B)和两个按钮,我正在努力实现这个效果: 当我点击一个按钮时,div A的不透明度增加,而div B的不透明度减小,反之亦然。但它似乎只有在减少时才有用...... 不能忽视什么是错的。
<!-- html -->
<div id="pippo"></div>
<div id="pluto"></div>
<div id="opacity">opacity</div>
<div id="opacity2">opacity2</div>
function changeOpacity() {
$( "#opacity" ).click(function() {
var pippo = $('#pippo').css('opacity');
var pluto = $('#pluto').css('opacity');
$( "#pippo").css( "opacity", pippo + 0.1 );
$( "#pluto").css( "opacity", pluto - 0.1 );
});
$( "#opacity2" ).click(function() {
var pi = $('#pippo').css('opacity');
var pl = $('#pluto').css('opacity');
$( "#pippo").css( "opacity", (pi - 0.1) );
$( "#pluto").css( "opacity", (pl + 0.1) );
return false;
});
}
changeOpacity();
答案 0 :(得分:4)
这里的问题是.css()
方法没有返回数字 - 实际上它给你一个字符串。所以当你尝试执行类似的东西时:
var pippo = $('#pippo').css('opacity');
$( "#pippo").css( "opacity", pippo + 0.1 );
如果说pippo
为0.9,则pippo + 0.1
会给你&#34; 0.90.1&#34;。数字0.1将被转换为字符串,您将获得两个字符串的串联(因为这是+
运算符所做的)。
然而,减法之所以有效,例如:
var pluto = $('#pluto').css('opacity');
$( "#pluto").css( "opacity", pluto - 0.1 );
是因为字符串没有减法运算符,因此pluto
会自动转换为数字。
要解决此问题,请考虑对parseFloat()
的返回值使用.css()
:
function changeOpacity() {
$("#opacity").click(function () {
var pippo = $('#pippo').css('opacity');
var pluto = $('#pluto').css('opacity');
$("#pippo").css("opacity", parseFloat(pippo) + 0.1);
$("#pluto").css("opacity", parseFloat(pluto) - 0.1);
console.log(pippo + 0.1);
});
$("#opacity2").click(function () {
var pi = $('#pippo').css('opacity');
var pl = $('#pluto').css('opacity');
$("#pippo").css("opacity", parseFloat(pi) - 0.1);
$("#pluto").css("opacity", parseFloat(pl) + 0.1);
return false;
});
}
这里有JSFiddle来演示。
希望这有帮助!如果您有任何问题,请告诉我。
答案 1 :(得分:0)
未来观众的Vanilla javascript选项。
(function () {
"use strict";
var pippo = document.getElementById('pippo'),
pluto = document.getElementById('pluto');
document.addEventListener('click', function (e) {
if (e.target.id == 'opacity') {
pippo.style.opacity = Number(pippo.style.opacity) + 0.1;
pluto.style.opacity = Number(pluto.style.opacity) - 0.1;
}
if (e.target.id == 'opacity2') {
pippo.style.opacity = Number(pippo.style.opacity) - 0.1;
pluto.style.opacity = Number(pluto.style.opacity) + 0.1;
}
}, false);
})();
(function () {
"use strict";
var pippo = document.getElementById('pippo'),
pluto = document.getElementById('pluto');
document.addEventListener('click', function (e) {
if (e.target.id == 'opacity') {
pippo.style.opacity = Number(pippo.style.opacity) + 0.1;
pluto.style.opacity = Number(pluto.style.opacity) - 0.1;
}
if (e.target.id == 'opacity2') {
pippo.style.opacity = Number(pippo.style.opacity) - 0.1;
pluto.style.opacity = Number(pluto.style.opacity) + 0.1;
}
}, false);
})();
#pippo {
width:100px;
height:100px;
border: 1px solid #cccccc;
background-color: #e3ee31
}
#pluto {
width:100px;
height:100px;
border: 1px solid #cccccc;
background-color: #316fee
}
#opacity {
width:40px;
height:20px;
background-color:#f0f0f0;
border: 1px solid #999999;
}
#opacity2 {
width:40px;
height:20px;
background-color:#f0f0f0;
border: 1px solid #999999;
}
<div id="pippo" style="opacity: 1;"></div>
<div id="pluto" style="opacity: 0;"></div>
<div id="opacity">opacity</div>
<div id="opacity2">opacity2</div>
答案 2 :(得分:-1)
看起来你的逻辑是正确的,但0.1的增量太小而不能看出差异。
$( "#pippo").css( "opacity", pippo + 1 );
上述代码之类的内容可以帮助您更清楚地看到差异。
这是帮助更好地了解差异的小提琴:
https://jsfiddle.net/k3xgLdrr/
这是您想要看到的行为吗?
答案 3 :(得分:-1)
获取当前的css不透明度值时,需要使用parseFloat()
。这是因为jQuery.css()
函数返回的是字符串而不是数字。
点击这里的小提琴: https://jsfiddle.net/voveson/gap9bh6b/1/