Discussion :

[fredericmarcel]

Bonjour,
Je voudrais cloner un élement et modifier le texte du p de la classe "visuNom"
Le clonage fonctionne bien, mais le nom de visuNom reste "Element 1" au lieu d'afficher "Elément 2", puis "Elément 3" etc.

Le HTML

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
 <div id="visu">  
             <div id="element"  name="0" class="element">
                <div id="porteVisuNom" class="porteVisuNom">
                    <p id="visuNom" class="visuNom">Element 1</p>
                </div>   
         </div> 
 
        </div>
        <button id="clone">clone</button>

Le CSS

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
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
 
      #clone{
         position : fixed;
         top:20px;
         left:46%;
         font-size:20px;
         width:9%;  
         z-index:15;
        display:flex;
        flex-direction: row;
        justify-content: center;
         text-align:center;
         padding-right:5px;
          padding-left:5px; 
    }
 
 
         #visu {
             position:fixed;
             top:100px;
            width:90%;   
            z-index;1;
            margin-top:5px;
             height:68%;
            margin-left:6.5%;
            display:flex;
            flex-flow: row wrap;
            align-content:flex-start;
            justify-content:flex-start;  
             // background-color:yellow;
             overflow:scroll;
        }
 
          .element {
              display: flex;
              flex-direction: column;
              justify-content:center;
             //box-shadow: 3px 3px 3px #4d4d4d;
             // border-radius: 10px;
              padding-left:10px;
              padding-right:10px;
              margin-bottom:25px;
              margin-right:20px;
              width:31%;
              z-index:20;
            //  height:50%
 
      } 
 
          .porteVisuNom {
          display: flex;
          flex-direction: column;
          justify-content:center;
          align-items: center;
          background-color: white;
          border: 7px solid limegreen;
          border-radius: 10px;
         // padding-left:5px;
         // padding-right:5px;
        // width:25%;
          height: 170px;
         // margin: 5px 0px;
        margin-bottom:8px;
        //overflow:scroll;
 
      } 
 
      .visuNom {
         font-family:"Helvetica Neue";
         padding-top:8px;  
        padding-bottom:8px;  
         padding-left:10px;
         padding-right:10px;
         color:black;			     
		 line-height:110%;
         text-align:center; 
         font-size:2.5em;  
         // width:260px;
      }

Le code JS

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
          var totalElements=0;
 
  $("#clone").click(function(){
      totalElements++;
      $("#element").clone().attr('id','element' +totalElements).appendTo("#visu").hide().fadeIn(2200, 'swing');
      var leNom = "Element" + totalElements
     //je voudrais que le p visuNom affiche la variable leNom

J'ai cherché partout, mais je ne trouve pas la solution.
Merci de votre aide. Je suis vraiment bloqué .

[Invité]

Bonjour,

1/ il me semble qu'on a déjà dit qu'on ne peut/doit pas dupliquer des id, non ?
Un id DOIT être UNIQUE.

Or, tu dupliques allègrement id="porteVisuNom", id="visuNom" (qui, à priori, ne servent à rien...)

2/ Que vient faire name="0" sur un <div> ?

3/ Pour répondre à ta question :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

    $("#element" + totalElements + " .visuNom").html("Element " + totalElements)

[fredericmarcel]

Ca fonctionne parfaitement.
En ce qui concerne le fait de dupliquer des id, je vais les remplacer par des class.
Le name indiquant le numéro de l'élément me sert à récupérer les données de l'élément que j'ai extraites de la base de données.
Grace à idElement, l'utilisateur peut ensuite modifier ou supprimer l'élément sur lequel il a cliqué.
Merci de ton aide. Je respire.

[Invité]

Alors utilise le bon attribut.

Pas name, mais data-xxxx :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<... data-machin="0"...>

En jQuery, ça se récupère avec :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$('#elementx').data('machin');

Ou

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$('#elementx').attr('data-machin');

• .data()
• .attr()

[fredericmarcel]

Merci. Je vais essayer d'incrémenter l'attribut "data-machin" à chaque fois que je clone un élément.
Bon dimanche électoral

[fredericmarcel]

Bonjour,
Je suis à nouveau bloqué.
Lorsque j'ai cloné le div "element", je voudrais que l'utilisateur clique sur un des deux enfants "porteVisuNom" ou "porteNiveau" pour pouvoir modifier leur valeur.
Dans le code JS ci-dessous, il me suffit de créer une alert qui affiche "Ceci est un porteVisuNom" ou "Ceci est un porte-niveau".
Mais lorsqu'on clique sur "porteVisuNom" ou "porteNiveau", il ne se passe rien.
Cela fonctionnait bien lorsque je ne clonais pas les éléments, mais que je les avais créés dans le HTML (element1.....element15)
Où est l'erreur ?
Merci de ton aide.

PHP

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
 
           <div id="element"  data-numero=0 data-nom="Element 0" class="element">
                 <div class="porteVisuNom">
                    <p  class="visuNom"></p>
                </div>   
                <div  class="porteNiveau"  name="1">  
                    <div class="niveau" data-niveau=150></div> 
                </div>   
         </div> 
 
          <div id="visu">  </div>
        <button id="clone">clone</button>

JS

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
 
  $(document).ready(function(){ 
    var totalElements=0;
       $("#element").hide();
  $("#clone").click(function(){
        $(".porteVisuNom").css("border", "7px solid blue") 
      totalElements++;
       //alert(totalElements)
      $("#element").clone().attr('id','element' +totalElements).appendTo("#visu").hide().fadeIn(2200, 'swing');
      var leNom = "Objectif " + totalElements
      //  alert(leNom)
      $("#element" + totalElements + " .visuNom").html("Objectif " + totalElements)
 
         $(".element + ".porteVisuNom").click(function() { 
                 alert("Ceci est un porteVisuNom")
           } 
          }); 
           $(".element + ".porteNiveau").click(function() { 
                 alert("Ceci est un porteNiveau")
           }
 
          }); 
 
 
 
 
 
 
 
});//document ready