Je voudrais prendre un tableau de devis et afficher un devis différent sur ma page toutes les 6 secondes.

J'ai essayé d'utiliser une fonction javascript qui parcourt le tableau et se fane dans le nouveau qoute. mais je continue à recevoir l'erreur qoutes n'est pas définie. J'ai essayé de déplacer le tableau dans la fonction et dans la fonction $(document).ready() et j'ai toujours la même erreur.

Voici mon code app.js:

var quotes = [
"Don't Limit Your Challenges, Challenge Your Limits.",
"If the doors of perception were cleansed every thing would appear to man as it is, Infinite.",
"The Power of Imaginiation Makes Us Infinite",
"The finite mind tries to limit the infinite.",
"The Only Limits In Our Life Are Those We Impose on Ourselves."
 ];


var quoteTimer = function(){

for(var i = 0; i< qoutes.length; i++){
    $('.container').find('h1').fadeIn().text(qoutes[i]);

}
}


$(document).ready(function(){

setInterval(quoteTimer, 6000);
});
0
DLF85 7 mars 2016 à 07:35

5 réponses

Meilleure réponse

Ajustez votre délai et cela devrait faire l'affaire

Mise à jour: fondu ajouté

Update2: espace réservé supprimé, commentaires ajoutés

var quotes = [
  "Don't Limit Your Challenges, Challenge Your Limits.",
  "If the doors of perception were cleansed every thing would appear to man as it is, Infinite.",
  "The Power of Imaginiation Makes Us Infinite",
  "The finite mind tries to limit the infinite.",
  "The Only Limits In Our Life Are Those We Impose on Ourselves."
];

// variable to keep track of last quote displayed
var i = 0;

// displays the next quote in the array
var quoteTimer = function() {
  
  // if at end of array, reset
  if (i >= quotes.length) {
    i = 0;
  }

  // fade out previous quote, 
  // while hidden, change the text to the next quote on the array
  $('h1').fadeOut(1000, function(){
    $(this).text(quotes[i]);
  });
  
  // display the quote
  $('h1').fadeIn();

  // increment counter by one
  i++;
}


$(document).ready(function() {
  $('h1').text(quotes[i++]); // initialize with first quote
  setInterval(quoteTimer, 6000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1></h1>
1
blurfus 7 mars 2016 à 04:56

Corrigez la faute de frappe qoutes, elle devrait être quotes

setInterval exécutera le rappel après la durée spécifiée et continuera ainsi .. Vous devrez peut-être appeler le gestionnaire (setInterval callback function) initialement.

Pour obtenir un effet fadeOut, les éléments doivent être dans l'état invisible. Utilisez .hide() avant fadeIn()

Essaye ça:

var quotes = [
  "Don't Limit Your Challenges, Challenge Your Limits.",
  "If the doors of perception were cleansed every thing would appear to man as it is, Infinite.",
  "The Power of Imaginiation Makes Us Infinite",
  "The finite mind tries to limit the infinite.",
  "The Only Limits In Our Life Are Those We Impose on Ourselves."
];
var i = 0;
var elem = $('.container').find('h1');
var quoteTimer = function() {
  elem.hide().fadeIn(1000).text(quotes[i]);
  i = ++i % quotes.length;
}
quoteTimer();
$(document).ready(function() {
  setInterval(quoteTimer, 6000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="container">
  <h1></h1>
</div>

Violon

2
Rayon 7 mars 2016 à 05:00

... HTML ...

<div class="container">
  <h1>initial text</h1>
</div>

... js ...

// define quotes array
var quotes = [
  "Don't Limit Your Challenges, Challenge Your Limits.",
  "If the doors of perception were cleansed every thing would appear to man as it is, Infinite.",
  "The Power of Imaginiation Makes Us Infinite",
  "The finite mind tries to limit the infinite.",
  "The Only Limits In Our Life Are Those We Impose on Ourselves."
];

// initialise current quote index
var quoteIndex = 0;

// set target element
var $target = $('.container').find('h1');

// create timer function
var quoteTimer = function() {
  // set target text to current quote
  $target.fadeIn().text(quotes[quoteIndex]);
  // increment the current index, or reset to 0 if on the last quote
  quoteIndex = quoteIndex < quotes.length - 1 ? quoteIndex + 1 : 0;
}

// fire it up..!
$(document).ready(function() {
  setInterval(quoteTimer, 6000);
});

Violon: https://jsfiddle.net/zpj1jjxe/1/

2
Billy Moon 7 mars 2016 à 04:54

2 choses:

Tout d'abord, vous avez une faute de frappe sur cette ligne ( guillemets au lieu de guillemets )

for(var i = 0; i< qoutes.length; i++){
    $('.container').find('h1').fadeIn().text(qoutes[i]);
}

Deuxièmement, le code ci-dessus ne fait pas ce que vous pensez qu'il fait, il parcourra rapidement toutes les citations toutes les 6 secondes et affichera la dernière citation

Essayez quelque chose comme ci-dessous, qui choisira constamment une nouvelle citation aléatoire dans la liste.

  var quotes = [
    "Don't Limit Your Challenges, Challenge Your Limits.",
    "If the doors of perception were cleansed every thing would appear to man as it is, Infinite.",
    "The Power of Imaginiation Makes Us Infinite",
    "The finite mind tries to limit the infinite.",
    "The Only Limits In Our Life Are Those We Impose on Ourselves."
     ];


    var quoteTimer = function(){
      //pick a random quote
      var quote = getRandomInt(0,4)
      //display it
      $('.container').find('h1').fadeIn().text(quotes[quote]);
    }

    //function to pick a random integer.
    function getRandomInt(min, max) {
       return Math.floor(Math.random() * (max - min + 1)) + min;
    }

    $(document).ready(function(){
       setInterval(quoteTimer, 6000);
    });

Violon

3
JanR 7 mars 2016 à 04:49

Essaye ça:

var quotes = [
"Don't Limit Your Challenges, Challenge Your Limits.",
"If the doors of perception were cleansed every thing would appear to man as it is, Infinite.",
"The Power of Imaginiation Makes Us Infinite",
"The finite mind tries to limit the infinite.",
"The Only Limits In Our Life Are Those We Impose on Ourselves."
 ];


var quoteTimer = function(){
var num = Math.floor(Math.random() * 6);
    //console.log(quotes[num]);
    $('.container').find('h1').fadeIn().text(quotes[num]);
}


$(document).ready(function(){
    setInterval(quoteTimer, 6000);
});
2
Yash 7 mars 2016 à 04:50