2015-08-14 1 views
2

Je n'arrive pas à comprendre comment cela change les images en JavaScript? Je suis surtout avoir des problèmes avec cette ligneQuel est l'objectif de "i = (i <arr.length)? I: 0"?

i = (i < images.length) ? i : 0; 

comment cette remise à zéro et de décider l'image:

var images = []; 
images[0] = "image1"; 
images[1] = "image2"; 
images[2] = "image3"; 
images[3] = "image4"; 
images[4] = "image5"; 
images[5] = "image6"; 

var i = 0; 
setInterval(fadeDivs, 3000); 

function fadeDivs() { 
    i = (i < images.length) ? i : 0; 
    console.log(i) 
    $('.product img').fadeOut(100, function(){ 
     $(this).attr('src', images[i]).fadeIn(100); 
    }) 
    i++; 
} 
+1

[Opérateurs ternaires] (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) – j08691

+0

merci d'avoir oublié que c'était plutôt cool –

Répondre

3

Il est appelé l'opérateur ternaire. Briser cette ligne:

i = i < images.length ? i : 0; 

... voici ce qui se passe. La déclaration revient à dire:

i = (if this is true) ? (assign this value) : (otherwise assign this); 

... donc si "i" est inférieur à "images.length", il gardera sa valeur (i = i), sinon, il réinitialise (i = 0).

3

i = i < images.length ? i : 0; veille à ce que la valeur de i reste un index de tableau valable - il remet à zéro la valeur de i à 0 si la valeur traverse images.length - ainsi, permettant de faire défiler la matrice images.

1

Cela a du sens. Je vais expliquer.

var i = 0; //the position of the image in the array "images" 

//set the interval. 
//After three seconds call "fadeDivs" 
setInterval(fadeDivs, 3000); 

function fadeDivs() { 

    //If the value of i is not longer than the length 
    //of the images array, then use the current value of i 
    //If the value is greater than the length of images 
    //reset the value of i to 0 
    i = i < images.length ? i : 0; 

    //find the top image and fade it out 
    $('.product img').fadeOut(100, function(){ 

     //now that it is faded out, change the src 
     //attribute to the next image url in the array 
     $(this).attr('src', images[i]).fadeIn(100); 

    }) 

    //increment i for the next image image url 
    i++; 
} 

On dirait que la question a été modifié pour plus de clarté après avoir posté ma première réponse. Oui, c'est comme d'autres l'ont dit, un opérateur ternaire. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator

Ce qui est fondamentalement une instruction if/then qui renvoie une valeur. Les deux lignes de code ci-dessous sont fonctionnellement identiques, mais un opérateur ternaire est plus élégant.

i = function(){if(i<images.length){return i}else{return 0}}() 

i = i < images.length ? i : 0 

Espérons que cela aide.