jQuery Girl
  1. jQuery Girl
  3. compte à rebours séparé pour divs
Intereting Posts
Définir l’opacité avec js ou fermer la fenêtre modale Téléchargement de fichier facultatif avec le plug-in de téléchargement de fichier Blueimp jquery L’événement jQuery .on () ne fonctionne pas pour l’élément ajouté dynamicment Comment utiliser JQuery pour accéder aux stream Twitch Problèmes avec show hide jquery Détection du navigateur à l’aide de jQuery asp.net appelle WebMethod depuis Javascript asyncronous Le module requirejs n’est pas défini comment déclencher un événement sur un changement de texte d’étiquette Dropdowns en cascade MVC 3 Comment append une instruction jQuery if dans un ensemble d’options de plug-in? Maintenir deux s synchronisés Comment puis-je obtenir le border-radius d’un élément utilisant jQuery? Créer de nouveaux champs de formulaire avec jQuery Comment trouver des enregistrements uniques provenant de deux tableaux différents en jquery ou javascript?

compte à rebours séparé pour divs

Je veux afficher le compte à rebours dans chacun de mes divs. En ce moment, je récupère les secondes de ma firebase database et les stocke dans l’atsortingbut data-countdown, puis utilise le code js suivant pour le compte à rebours. Seule la première division modifie la valeur chaque seconde et les autres ne changent pas. Voici le violon: http://fiddle.jshell.net/j61qs7oc/ 

//imagine this line of code in every loop of a for loop so $remaining will be different

voici le code js 

 $('[data-countdown]').each(function() { finalDate = $(this).data('countdown'); var $this = $(this); timeout = null; time = null; startCountdown($this,finalDate, 1000, end); function startCountdown(display,timen, pause, callback) { time = timen; display.html(timen); if (timen == 0) callback(); else { clearTimeout(timeout); timeout = setTimeout(function () { startCountdown(display,timen - 1, pause, callback) }, pause); } } function end() { alert(); } });

Lorsque vous déclarez une variable sans utiliser le mot clé var , vous créez une variable globale. Ainsi, chaque instance de votre compte à rebours écrase la valeur précédente de finalDate , timeout et time . Essayez d’append var avant chacune de ces lignes et il devrait faire ce dont vous avez besoin. c’est à dire: 

 var finalDate = $(this).data('countdown'); var $this = $(this); var timeout = null; var time = null; startCountdown($this,finalDate, 1000, end);

Vous pouvez aussi le faire en Javascript normal au lieu de jQuery … 

 var countdownDivs = document.querySelectorAll('div[data-countdown]'); function end() { alert(); } function countdown(display, timen, pause, callback) { display.innerHTML = timen; if (timen == 0) callback(); else { display.timeout; clearTimeout(display.timeout); display.timeout = setTimeout(function () { countdown(display, timen - 1, pause, callback) }, pause); } } for(var i = countdownDivs.length>>>0; i--;){ countdown(countdownDivs[i], countdownDivs[i].dataset.countdown, 1000, end); } 
 div[data-countdown]{ font-size:25px; color:#e3b40b; font-weight:600; }