Question

有人可以为我揭开这条线的神秘面纱吗？
这是javascript，它工作正常，我只是不明白代码背后的确切逻辑。也许有助于将代码分成几行或者用c＃或delphi写成“比较”。

（我从这里得到它：http://www.learningjquery.com/2009/02/slide-elements-in-different-directions）

非常感谢！

$('#inlay-container').animate(
{
    left: parseInt($('#container').css('left'),10) == 0 ? +$('#container').outerWidth() : 0
}...

Answer 1

这基本上只是一个三元表达。表格为(bool) ? (true val) : (false val)。它正在做的是通过将左值设置为#inlay-container或+$('#container').outerWidth()为0设置动画，具体取决于语句parseInt($('#container').css('left'),10) == 0的返回值，我们将在此处比较左侧值#container到0

Answer 2

用简单的语言：

if #container's css left property is 0

   animate #inlay-container to right equal to the outer width of #container
else

   animate #inlay-container to left 0 from it's current position

我们可以将代码详细说明为

var moveLeft;
if(parseInt($('#container').css('left'),10) == 0)
  moveLeft = $('#container').outerWidth();
else
  moveLeft = 0;
$('#inlay-container').animate(
{
    left: moveLeft
}

它使用的是一个简写if else赋值。它被称为ternary operator，如

val =  condition? this : that

了解更多Operator precedence with Javascript Ternary operator和http://msdn.microsoft.com/en-us/library/be21c7hw(v=vs.94).aspx

Answer 3

这意味着什么

如果container inlay-container left为container，则left的宽度为0的{{1}}，否则{{1 {}} inlay-container将是left。

问题：“揭秘”。

这就是我们所说的三元操作（或三元表达式）阅读更多：Ternary operation ^{_{（维基百科搜索总是派上用场！）}}

语法：

parseInt($('#container').css('left'),10) == 0 ?  //if its left is 0
    +$('#container').outerWidth() :              //then use container's width
    0                                            //else use 0

然而，它们之间的主要区别是三元表达式可以内嵌。

(condition) ? ture : false ;

//which is the same as:
if(condition){
    true
}else{
    false
}

相依：
实际上你的代码有点长IMO。我可以进一步缩短它：

var txt = a>1 ? a : 0;  //Yup!

var txt = 0;            //Too long.
if(a>1){
    txt = a;
}

Answer 4

$('#inlay-container').animate(
{
    left: parseInt($('#container').css('left'),10) == 0 ? + $('#container').outerWidth() : 0
}

$('#container').css('left')获得由left设置的#container CSS位置。

parseInt($('#container').css('left'),10)转换为left的整数。

现在您应该了解三元运算符--- ? --- : ---：

一般if-else：

if(something) {
  alert('done');
} else {
  alert('not done');
}

在三元文本中写成：

something ? alert('done') : alert('not done');

因此?充当if而:充当else。

$('#container').outerWidth()获得#container的宽度，包括padding和border。

因此，

 parseInt($('#container').css('left'),10) == 0  ?  // if left of #container is 0

                   + $('#container').outerWidth() // then left increase to outerwidth

                    : 0                             // else left will set to 0

因此上述条件也可以写成

if($('#container').css('left'),10) == 0) {
   left = $('#container').outerWidth();
} else {
   left = 0;
}

最后，整个语句可以写成

var left = null;
if($('#container').css('left'),10) == 0) {
   left = $('#container').outerWidth();
} else {
   left = 0;
}

$('#inlay-container').animate({
    left: left
});

相关参考：

难以阅读javascript代码 - 单线逻辑“神秘化”

4 个答案:

问题：“揭秘”。

最后，整个语句可以写成