Dev Faq
0
votes

Comment ajouter un bouton Unique div en click

Les gars aident lorsque je choisis par exemple Lenovo et cliquez sur le bouton Crée, mais je choisis Acer et cliquez à nouveau sur le bouton qu'il crée à nouveau Lenovo, puis d'ACER (par exemple: première étape (Acer Acer Lenovo ) Comment le rendre unique?

p> 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div style="width: 100%; background-color: bisque;"  class="top-head">

    </div>
   <form>
       <ul>
           <li>Lenovo<input class="filter-values" type="checkbox"></li>
           <li>HP<input class="filter-values" type="checkbox"></li>
           <li>Mac<input class="filter-values" type="checkbox"></li>
           <li>Sony<input class="filter-values" type="checkbox"></li>
           <li>LG<input class="filter-values" type="checkbox"></li>
       </ul>
       <button class="button-filter">button</button>
 
   </form> 

   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
   <script src="js.js"></script>

</body>
</html>

0 commentaires

4 Réponses :

0
votes

Changer de type pour être 'Type = radio'

0 commentaires
1
votes

  1. On dirait que vous devriez utiliser des boutons radio au lieu de cases à cocher
    code> p> li>

  2. Veuillez inclure des commentaires dans votre code, ils le rendent beaucoup fort> plus facile à lire p> li>

  3. Je n'utiliserais même pas jQuery, je le ferais ressembler à ceci: p> li>

    p> 

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div style="width: 100%; background-color: bisque;"  id="top-head">

    </div>
   <form onsubmit=" return drawResult()">
       <ul>
           <li>Lenovo<input id="lenovo" type="radio"></li>
           <li>HP<input id="hp" type="radio"></li>
           <li>Mac<input id="mac" type="radio"></li>
           <li>Sony<input id="sony" type="radio"></li>
           <li>LG<input id="lg" type="radio"></li>
       </ul>
<input type="submit"> 
   </form> 

   
   <script src="js.js"></script>

</body>
</html>

1 commentaires

Merci de votre attention et de votre aide, je pense que je n'ai pas bien expliqué, j'ai besoin de filtrer comme dans la boutique en ligne, alors pour moi, il doit s'agir de la case à cocher et choisir non seulement un élément

0
votes

Pour HTML, vous n'avez besoin que de deux modifications.

  1. Ajoutez une attribut de valeur à chaque case à cocher LI>
  2. Ajoutez l'attribut de type avec la touche Valeur (pour éviter la soumission du formulaire et de la recharge) Li> OL> 
    $(document).ready(function () {
   
   $('.button-filter').click( function(){
      $('.top-head').empty()

      $('input.filter-values[type=checkbox]:checked').each(function () {
         $('.top-head').append(`<div class = '${this.value}'>${this.value}</div>`);
      });
      
   })

});

1 commentaires

Je pense que je n'ai pas bien expliqué, j'ai besoin de filtrer comme dans la boutique en ligne, donc pour moi, il doit s'agir de la case à cocher et choisir non seulement un élément

0
votes

mais je choisis Acer et cliquez à nouveau sur le bouton qui crée à nouveau Lenovo puis ACER

Réponse: vous avez deux problèmes.

  1. Votre bouton d'enregistrement Cliquez plusieurs fois. Vous avez besoin d'un événement de bouton de clic avant l'enregistrement. xxx
    1. .prop ("coché") ne fonctionne pas correctement, s'il vous plaît à la fois à .is (": coché")

      Vous pouvez voir ma démo ici

0 commentaires

Articles qui pourrait vous intéresser :

Impossible d'importer le module "@ angular / material"
Interaction profonde avec break and catch
Utilisation de node.js comment renommer tous les fichiers d'un dossier
Google Chrome Uncaught (promis) DOMException lors de la lecture AUDIO