Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Afficher une div


Sujet :

JavaScript

  1. #1
    Membre à l'essai
    Afficher une div
    Hello,

    Voila ce que je veux faire : J'ai des checkbox, je veux afficher des images. Chaque checkbox fait référence à un fichier particulier. Par conséquent, je suis parti sur le principe que l'image avait le même nom que la valeur de la checkbox. Jusque là pas de pbs. Seulement je voudrais boucler ce script (avec forEach) afin de ne pas à avoir de créer une nouvelle div pour une nouvelle image. En gros je veux que le HTML soit généré via un script JS.

    C'est exactement ce code : https://www.tutorialrepublic.com/codelab.php?topic=faq&file=jquery-show-hide-div-using-checkboxes à ceci près qu'il y a 3 DIV pour 3 checkboxes.

    Comment faire ?

    Merci pour votre aide :-)

    Sylvain

  2. #2
    Expert confirmé
    Salut,

    Principe: http://javatwist.imingo.net/checkimages.htm

    - un nombre de checkboxes égal au nombre d'images;
    - des images invisibles a priori;
    - un click sur une checkbox change la visibilité de l'image correspondante;

    Code HTML :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
    <!DOCTYPE html>
    <html lang="fr">
    <head>
    <meta charset="UTF-8">
    <title></title>
     
    <style>
    .hide {display:none;text-align:center;}
    #check, #pitch {margin:50px;text-align:center;}
    </style>
     
    </head>
    <body>
     
    <div id="check">
    	<label><input type="checkbox">image 1</label>
    	<label><input type="checkbox">image 2</label>
    	<label><input type="checkbox">image 3</label>
    	<label><input type="checkbox">image 4</label>
    	<label><input type="checkbox">image 5</label>
    	<label><input type="checkbox">image 6</label>
    </div> 
     
    <div id="pitch">
    	<img class="hide" src="sm01.gif" alt="un" />
    	<img class="hide" src="sm02.gif" alt="deux" />
    	<img class="hide" src="sm03.gif" alt="trois" />
    	<img class="hide" src="sm04.gif" alt="quatre" />
    	<img class="hide" src="sm05.gif" alt="cinq" />
    	<img class="hide" src="sm06.gif" alt="six" />
    </div> 
     
     
    <script>
    const ch=document.querySelectorAll("#check input");
    ch.forEach((v,i)=>{
            v.addEventListener("click",()=>{
                    document.querySelectorAll("#pitch img")[i].classList.toggle("hide");
            })
    })
    </script>
     
    </body>
    </html>

  3. #3
    Membre à l'essai
    Bonjour,

    Merci pour ton retour mais c'est précisément ce que je ne veux pas. Je veux pouvoir générer de l'HTML avec un script JS.

    Pour faire la traduction française de mon script, je veux que celui ci fasse : "Pour chaque checkbox, tu récupères leurs valeurs ; quand elle est checkée tu affiches l'image dt le nom correspond à sa valeur et tu l'affiches dans la div2 ; quand elle est désélectionnée tu l'enlèves.".

    C'est un script typique pour utiliser les boucles, ici ForEach, et utiliser la méthode .push().

    Je sais que je suis pas loin, mais je bloque.

    Code :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    var legend = [];
            $('input[type="checkbox"]').click(function(){
              var val = $(this).attr("value");
                legend.forEach(function(element){
                    document.getElementById("legende").innerHTML +=
                          '<div class="' + element.get("val") + '"><table><tr><td><img src="' + element.get("val") +'.png"></td></tr></table></div>'
                })
            });


    Mais ça marche pas....

    Merci pour votre aide

    Sylvain

  4. #4
    Responsable LaTeX

    est-ce que ceci fait l'affaire?
    Code HTML :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
    <!DOCTYPE html>
    <html lang="">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title></title>
        <link rel="stylesheet" href="">
    </head>
     
    <body>
        <div id="check">
            <label><input type="radio" name="radio">image 1</label>
            <label><input type="radio" name="radio">image 2</label>
            <label><input type="radio" name="radio">image 3</label>
            <label><input type="radio" name="radio">image 4</label>
            <label><input type="radio" name="radio">image 5</label>
            <label><input type="radio" name="radio">image 6</label>
            <div class="container-image"></div>
        </div>
        <script>
            const inputs = document.querySelectorAll("#check input");
            const container = document.querySelector('.container-image');
            inputs.forEach((input,i) => {
                let img = '<img src="https://placehold.it/'+150/(1+i)*4+'">'
                input.addEventListener('click',()=>{
                    if(input.checked){
                        container.innerHTML='';
                        container.insertAdjacentHTML('afterbegin',img)
                    }
                })
            })
        
        </script>
    </body>
    </html>

  5. #5
    Expert confirmé
    De fait, je pense que tu souhaites des boutons radio... te permettant de n'afficher qu'une image à chaque fois...;
    Bref, clarifie déjà ce que tu veux en terme d'interface, avant de penser à la technique pour y arriver.

  6. #6
    Expert confirmé
    Tente ce 2e lien: http://javatwist.imingo.net/checkimages2.htm

    (et si on se plante, que veux-tu de plus précis?)

  7. #7
    Membre à l'essai
    Citation Envoyé par javatwister Voir le message
    Tente ce 2e lien: http://javatwist.imingo.net/checkimages2.htm

    (et si on se plante, que veux-tu de plus précis?)
    C'est exactement ça que je veux même si je pense qu'il me faut un script en PHP avec une requête AJAX, afin de pouvoir de l'éditer avec un formulaire dont les données seraient stockées dans un fichier XML.
    Mais merci pour vos retours :-)

###raw>template_hook.ano_emploi###