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

Code : Sélectionner tout - Visualiser dans une fenêtre à part
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();
});