Boucle for et append()

Version imprimable

Bonjour à tous,

J'ai un soucis avec mon code...

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
<script type="text/javascript">
 
    var check = $("<i class='fas fa-camera'></i>").click(function(){
      var p = $(this).parent();
      p.fadeOut(function(){
        $(".Caught").append(p);
        p.fadeIn();
      });
      $(this).remove();
    });
 
    var del = $("<i class='fas fa-trash-alt'></i>").click(function(){
      var p = $(this).parent();
      p.fadeOut(function(){
        p.remove();
      });
    });
 
    let Etape_1 = ["Souris Grise", "Moskito", "Arakne", "Boufton Blanc", "Boufton Noir"];
    for (var i = 0; i < Etape_1.length; i++) {
      var Monstre = $("<div class='Monstre'></div>").text(Etape_1[i]);
      Monstre.append(del, check);
      $(".Researched").append(Monstre);
    }
 
    </script>

Lorsque je lance le script les var del et check (ligne 23) ne s'ajoutent qu'à la dernière balise <div class='Monstre'></div>. J'aurais voulu que del et check s'ajoute à toutes les balises <div class='Monstre'></div>.

Comment puis-je faire ?

Cordialement,

Filty

28/02/2020, 10h07
SpaceFrog

Je ne comprends déja pas la syntaxe del = attribution d'un event ???
:koi:

Peux-tu expliciter le but de la manoeuvre ?
28/02/2020, 10h50
Filty

Sur ma page web, del ajoute un icône "Trash" et quand je clique dessus il fait disparaître la balise div (qui contient l'icône) dans un fondu puis l'efface complètement de la page.

Bonjour

après un temps d'adaptation 8O, j'ai fini par appréhender le code... mais je reste dubitatif quant à la gestion des évènements...

Perso, j'aurais codé comme ça :

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
"use strict";
 
const Etape_1 = ["Souris Grise", "Moskito", "Arakne", "Boufton Blanc", "Boufton Noir"];
for (let i = 0, lg = Etape_1.length; i < lg; i++) 
{
  let check = $("<i class='fas fa-camera'></i>");
  let del = $("<i class='fas fa-trash-alt'></i>");
  let Monstre = $("<div class='Monstre'></div>");
  Monstre.text(Etape_1[i]);
  Monstre.append(del, check);
  $(".Researched").append(Monstre);
}
 
$(".Researched, .Caught").on("click", ".fa-camera", function(){
  var p = $(this).parent();
  p.fadeOut(function(){
    $(".Caught").append(p);
    p.fadeIn();
  });
  $(this).remove();
});
 
$(".Researched, .Caught").on("click", ".fa-trash-alt", function(){
  var p = $(this).parent();
  p.fadeOut(function(){
    p.remove();
  });
});

Avec :

Code:

1
2
3
4
<h4>Researched :</h4>
<div class="Researched"></div>
<h4>Caught :</h4>
<div class="Caught"></div>

N.B. C'est quoi, un "Boufton" ? :koi:

28/02/2020, 20h42
Filty

Wow !

Merci beaucoup pour le code que tu as fourni ! Je vais essayer ça dès que possible !

Un boufton c'est le petit du bouftou (des monstres dans le MMORPG Dofus) :).

P.S. : Je viens de tester et ça marche du tonnerre ! Merci infiniment !!