0
votes

Ajouter un élément à la liste à l'aide de la fonction map (JavaScript)

J'ai une liste de boutons. Ici, j'affiche mes boutons à l'aide d'une fonction de carte car le nombre de boutons est déterminé par le nombre d'éléments dans une liste, par exemple, "myList" a 4 lettres. Cependant, dans d'autres cas, les listes contiendront un nombre différent de lettres.

Les boutons sont également colorés sur la base de la liste des autres "mycolors", ce qui peut également changer dans les autres cas. P>

Cependant, je montrerai toujours le bouton "Terminé" au bas du menu du bouton, bien que la longueur de la liste varie par le cas. J'aimerais que ce bouton soit placé dans le même menu (#buttongallery) afin que le formatage soit cohérent. Est-ce que quelqu'un sait comment insérer le bouton "Terminé" dans la fonction Carte? P>

Merci d'avance! (Toute conseils sur la modification de ce post sera plus clairement claire serait également appréciée.) P>

Code ci-dessous: (Pour l'instant, vous pouvez voir que je définit directement la position du bouton "Terminé") P >

<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <style media="screen">
    .buttons {
      width: 150px;
      height: 50px;
      border: solid 2px black;
      text-align: center;
      color: black;
      cursor: pointer;
      background-color: white;
      margin: 2px;
    }

    #buttonGallery {
      margin: 10px;
      padding: 10px;
      border: solid 2px black;
      width: 155px;
    }

    #done {
      width: 150px;
      height: 50px;
      border: solid 2px black;
      text-align: center;
      color: black;
      cursor: pointer;
      background-color: white;
      margin: 2px;
    }
  </style>
</head>

<body>

  <div id="done">
    <p>done</p>
  </div>

  <script type="text/javascript">
    let $buttons = $('<div id="buttonGallery">');
    let myList = ["A", "B", "C", "D"];
    let myColors = ["red", "green", "blue", "red"];

    myList.map(function(letter, index) {
      let $button = $("<div></div>")
        .addClass("buttons")
        .attr("id", "button_" + letter)
        .html("<p>" + letter + "</p>")
        .on("mouseenter", function() {
          $(this).css("background", myColors[index]);
        })
        .on("mouseleave", function() {
          if (!$(this).hasClass('clicked')) {
            $(this).css("background", "transparent");
          }
        })
        .on("click", function() {
          $(this).css("background", myColors[index]);
          $(this).addClass('clicked');
        })
      $buttons.append($button);
    });

    $("body").append($buttons);

    $("#done").on("click", clearColor);

    function clearColor() {
      $(".buttons").css({
        backgroundColor: 'transparent'
      });
      $(".buttons").removeClass('clicked');
    }
  </script>
</body>

</html>

javascript jquery html css

0 commentaires

3 Réponses :

0
votes

.MAP () renvoie un tableau. Avez-vous essayé de l'attribuer à une variable? xxx

0 commentaires

0
votes

<body>
<div id="buttonGallery"> <!-- add this line -->
  <div id="done">
    <p>done</p>
  </div>
</div> <!-- add this line -->
  <script type="text/javascript">
//    let $buttons = $('<div id="buttonGallery">'); <-- remove this line
    let $buttonGallery = $("#buttonGallery");
    let myList = ["A", "B", "C", "D"];
    let myColors = ["red", "green", "blue", "red"];

    $buttonGallery.children(":not(#done)").remove(); // <-- add this to remove added button except done button.

    myList.map(function(letter, index) {
      let $button = $("<div></div>")
        .addClass("buttons")
        .attr("id", "button_" + letter)
        .html("<p>" + letter + "</p>")
        .on("mouseenter", function() {
          $(this).css("background", myColors[index]);
        })
        .on("mouseleave", function() {
          if (!$(this).hasClass('clicked')) {
            $(this).css("background", "transparent");
          }
        })
        .on("click", function() {
          $(this).css("background", myColors[index]);
          $(this).addClass('clicked');
        })
      $("#done").before($button); // <-- edit this line
    });

    // $("body").append($buttons); <-- remove this line

    $("#done").on("click", clearColor);

    function clearColor() {
      $(".buttons").css({
        backgroundColor: 'transparent'
      });
      $(".buttons").removeClass('clicked');
    }
  </script>
</body>

0 commentaires

1
votes

La réponse rapide est que vous pouvez simplement l'ajouter à l'élément qui maintient les boutons:

$ ("# fait"). APPENDTO ("# Buttongallery") CODE> P> P> P> P > Ici, j'ai pris une certaine liberté avec vos boutons pour faire moins de travail, déplacer le comportement du .on () code> en dehors du .map code> où vous générez vos boutons à partir des valeurs d'objet . Comment obtenir vos valeurs peut être effectuée de plusieurs façons mais à l'aide de vos tableaux, j'ai simplement ajouté la couleur sur le bouton lorsque je l'ai généré sous forme d'attribut code> data code> qui peut être utilisé pour afficher / masquer et "corriger" la couleur en cliquant. Pour le plaisir, je montre aussi comment "basculer" la couleur sur un deuxième clic. P>

puisque vous générez un div code> pour votre galerie de boutons, j'ai ajouté que sur le HTML à la place. Pour simplifier le code un peu. p>

p>



<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<body>
  <div id="done">
    <p>done</p>
  </div>
  <div id="buttonGallery"></div>
</body>

</html>

0 commentaires