Jquery tableau associatif

Version imprimable

Salut, encore un problème avec ce fameux Javascript et jquery.

Alors voilà j'ai un code pour transformer un texte.
Il est récupérer avec une data, stocker dans un tableau est ré-afficher avec l'animation.

Or j'ai créer 3 div différente avec trois data différente pour que les textes respectif s'affiche aux bons endroit, or vue que toute les data sont stocker dans le même tableau le texte entier s'affiche dans les trois div.
En fait il me faudrait soit un tableau associatif qui contient le contenu de mes data avec la cléf data soit trois tableau différents, que je n'arrive pas à faire. Une idée ?

Une solution? Merci:calim2:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
function stringToArray(string){
  var array = [];
  var length = string.length;
  var index = 0;
 
  for(index = 0; index < length; ++index){
    array.push(string[index]);
  }
  return array;
}
 
function splitText(){
  var context = $('[data-magic-text]');
  var contents = context.text();
  var letters = stringToArray(contents);
  var markup = '';
  letters.forEach(function(letter){
    markup += '<span>' + letter + '</span>';
  });
  var contextObjet = $('[data-deux-text]');
  var contentsObjet = contextObjet.text();
  var objets = stringToArray(contentsObjet);
  console.log(objets);
  objets.forEach(function(objet){
    markup += '<span>' + objet + '</span>';
  });
  var contextClient = $('[data-trois-text]');
  var contentsClient = contextClient.text();
  var clients = stringToArray(contentsClient);
  clients.forEach(function(client){
    markup += '<span>' + client + '</span>';
  });
  context.html(markup);
  contextObjet.html(markup);
  contextClient.html(markup);
}
 
function animateText() {
  var context = $('[data-magic-text]');
  var contextObjet = $('[data-deux-text]');
  var contextClient = $('[data-trois-text]');
  var delay = 400;
  context.children().each(function(index, letter) {
    setTimeout(function() {
      $(letter).addClass('is-visible');
    }, delay * (index / 15));
  });
  contextObjet.children().each(function(index, objet) {
    setTimeout(function() {
      $(objet).addClass('is-visible');
    }, delay * (index / 15));
  });
  contextClient.children().each(function(index, client) {
    setTimeout(function() {
      $(client).addClass('is-visible');
    }, delay * (index / 15));
  });
}
 
$(document).ready(function(){
  splitText();
  animateText();
});

bonsoir,
c'est vrai que ton code est TROP répétitif, tu peux le factoriser en un seul sélecteur comme suite :

Code:

1
2
3
4
 
<div data-magic-text='magic'>texte magic</div>
<div data-deux-text='deux'>texte deux</div>
<div data-trois-text='trois'>texte trois</div>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
 
 
var delay=400, contents, letters, markup;
 
function stringToArray(string) {
  var array = [];
  var length = string.length;
  var index = 0;
 
  for (index = 0; index < length; ++index) {
    array.push(string[index]);
  }
  return array;
}
 
function Go() {
  $('[data-magic-text],[data-deux-text],[data-trois-text]')
    .each(function(index, obj) {
      markup = '';
      contents = $(obj).text().trim();
      letters = stringToArray(contents);
      $(letters).each(function(index_1, letter) {
        markup += '<span>' + letter + '</span>';
        $(obj).html(markup);
        setTimeout(function() {
          $(obj).children('span').eq(index_1).addClass('is-visible');
        }, delay * (index_1 / 15));
      });
    });
}
 
$(document).ready(function() {
 Go();
});

Bonjour,

1- sans vouloir vexer personne... la fonction stringToArray() se résume à :
Code:

1 2 3 4 5 function stringToArray(string) { let array = string.split(''); return array; }
A mon humble avis, on peut même s'en passer... et écrire directement letters = contents.split("");.

2- Je ne vois pas trop à quoi servent les data-xxx. Il suffit d'une classe.

3- au lieu d'ajouter des <span< et une classe "is-visible", il suffit aussi d'ajouter chaque lettre progressivement.
Code:

1 2 3 <div class="animate-text">c'est un texte vraiment magic !</div> <div class="animate-text">voici le texte deux</div> <div class="animate-text">et voilà enfin le texte trois</div>
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 "use strict"; function animate_text() { let delay = 400, contents, letters; $(".animate-text").each(function(index, obj) { contents = $(obj).text().trim(); $(obj).html(''); // on vide le contenu letters = contents.split(""); $(letters).each(function(index_1, letter) { setTimeout(function() { $(obj).html( $(obj).html() + letter ); // on ajoute chaque lettre l une après l autre }, delay * (index_1 / 5)); }); }); } $(document).ready(function() { animate_text(); });
Pour que les trois textes démarrent successivement (l'un après l'autre), on peut ajouter un délai supplémentaire : https://codepen.io/jreaux62/pen/djNZLb
Code:

1 2 3 4 5 6 7 8 9 10 let delay = 400, delay_start = 0, ... $(letters).each(function(index_1, letter) { setTimeout(function() { $(obj).html( $(obj).html() + letter ); // on ajoute chaque lettre l une après l autre }, delay_start + delay * (index_1 / 5)); }); // le suivant démarre à la fin du précédent delay_start += delay * letters.length / 5;
N.B. On est d'accord pour dire que les textes ne doivent pas contenir de balises HTML.
Sinon, celles-ci ne sont pas prises en compte.

Pour aller plus loin : :recherch: "script machine à écrire JavaScript"

21/07/2018, 16h37
Toufik83

oui, @jreaux62 a raison concernant les data-xxx, je voulais pas les supprimer et les remplacer par une simple classe comme il l'a mentionné.
je ne sais pas si tu les utilisent dans un autre endroit...
21/07/2018, 18h39
Momodughetts

Ok génial ! Faut que j'apprenne les méthode je connaissais pas eq ni split c'est sûrement pour ça que je n'arrivais pas à diviser mes trois parties! Merci beaucoup, j'ai utiliser des data pour eviter le surchargement de class j'en ai déjà deux appliquer une pour le positionnement, la fameuse magic text donc autant utiliser une data qui me gênera pas. C'est vrai que l'affichage lettre par lettre fera moins charger que span par span !
22/07/2018, 00h11
Watilin
Bonsoir,

juste quelques infos complémentaires : une chaîne est un objet itérable. Ça signifie qu’on peut la passer à Array.from :

Code:

letters = Array.from(contents)

… Ou « l’étaler » avec cet opérateur dont le nom français est beaucoup trop compliqué :

Code:

letters = [...contents]

… Ou encore plus simple, utiliser la boucle for/of :
Code:

1 2 3 for (let letter of contents) { }
En temps normal, la méthode .each() de jQuery permet de parcourir les itérables, mais pas les chaînes, car jQuery tente d’analyser les chaînes comme du code HTML ou comme un sélecteur CSS.