1

有人可以为我揭开这条线的神秘面纱吗？
它是 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
}...
4

4 回答 4

2

This is basically just a ternary expression. The form is (bool) ? (true val) : (false val). What it is doing is animating the #inlay-container by setting the left value to either +$('#container').outerWidth() or 0 depending on the return of the statement parseInt($('#container').css('left'),10) == 0 where we are comparing the left value of the #container to 0

于 2012-06-03T17:22:08.117 回答
1

用简单的语言：

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

Read more Operator precedence with Javascript Ternary operator and http://msdn.microsoft.com/en-us/library/be21c7hw(v=vs.94).aspx

于 2012-06-03T17:21:34.497 回答
1

What it means is

Use container's width as inlay-container's left if container's left is 0, or else inlay-container's left will be 0.

Problem: "Demystified".

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

This is what we called Ternary operation (or Ternary expression).
Read more: Ternary operation (A Wikipedia search always comes in handy!)

Syntax:

(condition) ? ture : false ;

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

However, the main difference between them is that ternary expression can be used inline.

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

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

Unrelated:
Actually your code is a bit long IMO. I can shorten it even more:

left: +$('#container').css('left')?0:+$('#container').outerWidth()
于 2012-06-03T17:23:23.130 回答
1 
$('#inlay-container').animate(
{
    left: parseInt($('#container').css('left'),10) == 0 ? + $('#container').outerWidth() : 0
}

$('#container').css('left') get the left position of #container set by CSS.

parseInt($('#container').css('left'),10) convert to integer that left.

Now you should know about ternary operator --- ? --- : ---:

General if-else:

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

In ternary it written as:

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

So ? act as if and : act as else.

$('#container').outerWidth() get the width of #container including padding and border.

So therefore,

 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

So above condition can also be written as

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

At last, whole statement can be written as

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

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

Related refs:

于 2012-06-03T17:26:49.773 回答