Système de visualisation en clonant un élément

Version imprimable

Bonjour,

je suis face as un problème, je souhaite récupéré et cloner un bout de code html et ensuite être réafficher dans une pop up en claire ( j'ai un système de carte que l'on peut partager a l'aide d'un bouton qui lui déclencher une pop-up et j'aurai voulu que l’élément que je souhaite partager cet a dire la carte soit afficher dans la pop up comme un système de visualisation avec une class différente pour pouvoir modifier sa taille

code html ( les 2 cartes sont la face et le dos que je souhaite cloner, as savoir que des carte je peut en avoir beaucoup et que je cible juste la face et le dos a chaque fois )

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
  <div class="list-cards-family" id="13">
 
<button id='openModal' onclick="openModal()" class="mdc-icon-button material-icons mdc-card__action mdc-card__action--icon mdc-ripple-upgraded--unbounded mdc-ripple-upgraded" title="Share" data-mdc-ripple-is-unbounded="true"  style=" position:relative; right:0; top:0; z-index:10;    border-radius: 50px;top: 5px;color: #828282; --mdc-ripple-fg-size:28px; --mdc-ripple-fg-scale:1.71429; --mdc-ripple-left:10px; --mdc-ripple-top:10px;">share</button>
 
<div class="cards"  data-tilt data-tilt-glare data-tilt-max-glare="0.8" style="position:relative;">
 
        <div class="card-categorie">Categorie 1  
 
 
        </div>
 
 
 
 
              <div class="card-div-title">
 
<h1 class="Card-title">Design UX</h1>
 
 
    </div>
    <div class="card-body">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
          sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
 
        </p>
 
    </div>
 
    </div>
 
 
 
    <div class="cards" data-tilt data-tilt-glare data-tilt-max-glare="0.8">
 
 
         <div class="card-categorie">Categorie 1
              <div class="card-pagination">1/50</div>
                </div>
 
            <div class="card-div-title">
 
        <h1 class="Card-title">Design UX</h1>
 
 
            </div>
            <div class="card-body">
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
                  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.  Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
                  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.  Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
                  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
 
                </p>
            </div>
 
            </div>

merci d'avance ;)

25/10/2018, 11h32
Invité
Bonjour, et bienvenu sur DVP.

1- :recherch: "bescherelle" :aie:

2- qu'est-on censé faire avec ton bout de code ?

Pour récupérer / ré-afficher du code HTML :
- innerHTML
- textContent
Pour sélectionner un élément :
- document.getElementById()
- document.querySelector()
- document.querySelectorAll()
25/10/2018, 11h38
NICOLAS7A

2- je suis novice dans le javascript et j'aurai voulu savoir qu'elle est le code javascript pour répondre a mon besoin
a savoir que je souhaite que quand l'on clic sur le bouton partager le java récupéré la balise div qui en-dessous pour ensuite la ré-afficher
j'ai passer ma longue journée hier sans résultat.

merci quand même.
25/10/2018, 11h40
Invité

Alors montre ce que tu as fait.

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
<div class="list-cards">
    <div class="list-cards-family" id="13">
            <button  onclick="openModal()" class="mdc-icon-button material-icons mdc-card__action mdc-card__action--icon mdc-ripple-upgraded--unbounded mdc-ripple-upgraded" title="Share" data-mdc-ripple-is-unbounded="true"  style=" position:relative; right:0; top:0; z-index:10;    border-radius: 50px;top: 5px;color: #828282; --mdc-ripple-fg-size:28px; --mdc-ripple-fg-scale:1.71429; --mdc-ripple-left:10px; --mdc-ripple-top:10px;">share</button>
      <div class="cards"  data-tilt data-tilt-glare data-tilt-max-glare="0.8" style="position:relative;">
 
        <div class="card-categorie">Categorie 1  
 
        </div>
 
              <div class="card-div-title">
 
<h1 class="Card-title">Design UX</h1>
 
 
    </div>
    <div class="card-body">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
          sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
 
        </p>
 
    </div>
 
    </div>
 
    <div class="cards" data-tilt data-tilt-glare data-tilt-max-glare="0.8">
 
         <div class="card-categorie">Categorie 1
              <div class="card-pagination">1/50</div>
                </div>
 
            <div class="card-div-title">
 
        <h1 class="Card-title">Design UX</h1>
 
 
            </div>
            <div class="card-body">
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
                  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.  Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
                  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.  Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
                  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
 
                </p>
            </div>
 
            </div>
 
        </div>

Code:

1
2
3
4
5
6
function newFunction() {
    var l1 = document.getElementById("#13");
    var l2 = l1.childNodes;
    $(document).ready(function () {
        var cloned = $("l2").clone().appendTo($("#modal"));
    });}

25/10/2018, 12h16
Invité
Bonjour,

1- il faut apprendre la syntaxe :

Code:

document.getElementById("13"); // JavaScript

ou

Code:

document.querySelector("#13"); // JavaScript

ou

Code:

$("#13"); // jQuery

2- tu utilises 2 syntaxes différentes : JavaScript et jQuery.
- En as-tu conscience ?
- Est-ce volontaire ?
3- Ne jamais hésiter à faire une recherche quand on a un doute ou qu'on ne sait pas.
C'est comme ça qu'on progresse.

Si j'ai bien compris...

En JavaScript pur ça devrait donner :

Code:

1
2
3
4
5
6
7
function newFunction() {
  var l1 = document.getElementById("13");
  var l2 = document.createElement('div');
  l2.setAttribute('id','12');
  l2.innerHTML = l1.innerHTML ;
  document.getElementById("modal").append(l2);
}

En jQuery :

Code:

1
2
3
4
5
6
function newFunction() {
  var l1 = $("#13");
  var l2 = $('<div></div>');
  l2.attr('id','12').html( l1.html() );
  l2.appendTo($("#modal"));
}

ou juste (si on n'a pas besoin d'un div supplémentaire dont l'id est "12") :

Code:

1
2
3
4
function newFunction() {
  var l1 = $("#13");
  l1.children().clone().appendTo($("#modal"));
}

25/10/2018, 12h37
NICOLAS7A

Comme je l'ai dit je suis débutant, j'ai dénicher quelque bout de code avec l’espoir que ça marche.

Quelqu'un peut m'aide SVP
Merci