JavaScript - 为什么附加赋值操作符不按预期工作？

我目前正在用一些动画增强网站。JavaScript - 为什么附加赋值操作符不按预期工作？

我试过这段代码：

// Opacity is 0 in the beginning. Set 
// in CSS. 
// 1. Parameter: Boolean - true if making the 
// element visible; false if making it vanish. 
// 2. Parameter: Object 

var changeOpacity = function(direction, element) { 
    var css = element.style; 
    var goStep = function(signedStep) { 
    css['opacity'] += signedStep; 
    changeOpacity(direction, element); 
    }; 

    if (direction) { 
    if (css['opacity'] < 1.0) { 
     setTimeout(function() { 
     goStep(0.1); 
     }, timeStep); 
    } 
    } else { 
    if (css['opacity'] >= 0.1) { 
     setTimeout(function() { 
     goStep(-0.1); 
    }, timeStep); 
    } else { 
     css['display'] = 'none';  
    } 
    } 
};

它都没有奏效。

我在代码中写了一些console.logs：“opacity”在赋值后总是保持在0.1。

我的预期是什么：0.0 - 0.1 - 0.2 - 0.3 ...

现在我用这个代码：

// ... 
var goStep = function(signedStep) { 
    css['opacity'] = +css['opacity'] + signedStep; 
    changeOpacity(direction, element); 
}; 
// ...

工作正常。但我仍然想知道为什么使用组合赋值加法运算符失败。

有没有人有想法？

来源

2016-01-18 bo256

CSS值是字符串，比较字符串操作（虽然他们会像数），以数字会给你意想不到的效果。 – Teemu

'css.opacity'的值是一个字符串。因此添加它以连接字符串。如果'signedStep'的值是这样的结果字符串是一个无效的值，分配将被忽略。 “+”的作用是因为在添加到数字之前强制将“css.opacity”强制为一个数字。 –

css['opacity']是一个字符串。如果你给一个字符串添加一个数字，它会将该数字转换为一个字符串并将最终的两个字符串连接起来。

css['opactity'] = 0.1 
css['opacity'] += 0.5 // => "0.10.5"

来源

2016-01-18 10:48:57

我也这么认为。但是“不透明”并不是“以这种方式增长”。从一个输出的console.log我制备：后：0.1 之前：0.1 后：0.1 之前：0.1 后：0.1 之前：0.1 – bo256

我使用的代码：的console.log（ '之前：％s' 的， CSS [ '不透明']）; \t css ['opacity'] + = signedStep; \t console.log（'After：％s'，css ['opacity']）; \t changeOpacity（direction，element）; – bo256

而不是“增长”它会被覆盖每次，你会得到一个无限递归。 – bo256

您与数累积串，所以在第一种情况下，你实际上是串联的值

在这里看到：https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Operators/Assignment_Operators#Addition_assignment

第二的形式给出了工作，因为你正在转换css['opacity']多项：+css['opacity']

试试这个：

var test = "0.1", 
 
    test2 = "0.1"; 
 
    signedStep = 0.1; 
 

 
    test += signedStep; 
 
    alert(test+" is a "+typeof test); 
 
    test2 = +test2 + signedStep; 
 
    alert(test2+" is a "+typeof test2);

个

来源

2016-01-18 10:49:26 jolmos

JavaScript - 为什么附加赋值操作符不按预期工作？

回答

相关问题