JavaScript if 语句不应该返回 true

Question

我有一个输入面板:

<div id="user_input">...</div>

我有一个按钮:

<input type="button" id="panel_button">...</button>

我有一个选择器:

function $(id) {
    return document.querySelector(id);
}

我有一个事件处理器:

var button_panel = $('#panel_button');
button_panel.addEventListener('click', fadeUserInputPanel, false);

最后我有 3 个用于淡入和淡出输入面板的函数:

var user_input_panel = $('#user_input');
user_input_panel.style.opacity = 1;

function fadeUserInputPanel()
{
    if(user_input_panel.style.opacity == 1)
    {
        fade_out();
    } 
    else if(user_input_panel.style.opacity == 0)
    {
        fade_in();
    }
}

function fade_out() 
{
    if(user_input_panel.style.opacity > 0) 
    {
        user_input_panel.style.opacity -= 0.1;
        setTimeout(fade_out, 50);
    }
}

function fade_in() 
{
    if(user_input_panel.style.opacity < 1) 
    {
        user_input_panel.style.opacity += 0.1;
        setTimeout(fade_in, 50);
    }
}

问题如下:

当我加载页面时，可以看到输入面板 - 因为它的不透明度值为 1。

然后我单击 panel_button，它开始使输入面板淡出。它工作得很好，所以不透明度直接变为 0，面板慢慢消失。

但是 当我再次点击 panel_button 时，它开始使输入面板淡入，但是当输入面板的不透明度为 0.1 时它停止了，它确实如此不要再继续了。

但根据“fade_in()”函数 - 如果不透明度小于 1 - 它应该继续淡入面板。为什么它不起作用？

Answer 1

发生这种情况是因为 style.opacity 不是数字，而是字符串。

> document.body.style.opacity = 0
0
> document.body.style.opacity 
"0"
> document.body.style.opacity += 0.1 
"00.1"
> document.body.style.opacity += 0.1 
"0.10.1"
> document.body.style.opacity += 0.1 
"0.10.1"

fade_out() 的减法工作正常，但这只是因为 -= 运算符没有连接语义，并且总是将参数强制为数字。

要修复，手动将不透明度强制为数字:

function fade_in() {
    var opacity = +user_input_panel.style.opacity;
    if (opacity < 1) {
        user_input_panel.style.opacity = opacity + 0.1;
        setTimeout(fade_in, 50);
    }
}