jQuery点击切换不透明度

Question

我有两个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();

JsFiddle here

- uomopalese

---

在检索CSS值时使用parseFloat() - 这里有一个fiddle。 - billyonecan

Answer 1

这里的问题是.css()方法不会返回一个数字，事实上它会返回一个字符串。因此，当你尝试执行类似以下的操作时：

var pippo = $('#pippo').css('opacity');    
$( "#pippo").css( "opacity", pippo + 0.1 );

如果pippo是0.9，那么pippo + 0.1将会给你"0.90.1"。数字0.1会被转换成字符串，并且你会得到两个字符串的连接（因为这是+运算符所做的）。但是，减法能够工作的原因如下：

var pluto = $('#pluto').css('opacity');
$( "#pluto").css( "opacity", pluto - 0.1 );

这是因为字符串没有减法运算符，所以pluto会自动转换为数字。

为了解决这个问题，请考虑对从.css()返回的值使用parseFloat()：

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演示链接。

希望这能帮到你！如果你有任何问题，请告诉我。

- Serlite

Answer 2

看起来你的逻辑是正确的，但增量为0.1太小，无法看出差异。

$( "#pippo").css( "opacity", pippo + 1 );

类似上面的代码将帮助您更清楚地看到差异。

这里有一个小工具，可以帮助更好地看到差异：

https://jsfiddle.net/k3xgLdrr/

这是你想看到的行为吗？

- garrettqmartin8

Answer 3

在获取当前的CSS不透明度值时，你需要使用parseFloat()函数。这是因为jQuery.css()函数返回的是一个字符串而不是一个数字。

点击这里查看示例： https://jsfiddle.net/voveson/gap9bh6b/1/

- Vince

---

第一次回答。真的很好奇，不是想挑起争端——为什么要踩我？ - Vince

那么没有理由吗？好的。 - Vince

Answer 4

对于未来的观众，这是一个纯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>

- user4639281