IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
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

jQuery Discussion :

Code javascript utilisant json, jquery et css


Sujet :

jQuery

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre habitué
    Femme Profil pro
    Étudiant
    Inscrit en
    Janvier 2019
    Messages
    8
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Âge : 27
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Janvier 2019
    Messages : 8
    Par défaut Code javascript utilisant json, jquery et css
    Bonjour à tous,

    J'aimerais faire un site équivalent à celui-ci https://hello-jquery6.glitch.me/ mais en utilisant un générateur aléatoire de chiens (vous moquez pas ). Or j'ai à peu pris repris le même code mais ça ne marche absolument pas. Je suis bloquée car je ne comprends pas où est le problème, voici le code :

    1) Code JS :
    Code : 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
    $.getJSON( "https://api.thedogapi.com/v1/images/search?limit=50&page=50&order=Desc", function( json ) { //i take the data     from the dogapi database and callback to the function json
      console.log( json ); // print data in the console
      var dogs = json; //the variable dogs uses the document json 
     
      var body = $( "body" );   // store the "body" of our document inside a jQuery object id body
     
      for( var i = 0; i< json.length; i = i + 1 ) {   // loop through each dogs in our "breeds" array
     
        var dog = dogs[ i ];     // store the current dog in a variable
     
        var imgContainer = $( "<div class='img-container'></div>" ); // we create a container for the dog image and its data
        var img = $( "<img>" );     // we create a jQuery object with an "img" element
     
        img.attr( "src", dogs.url);   // set its "src" attribute with a jquery method
        imgContainer.append( img );     // and append this element to our container
     
        var dogsdata = $( "<p class='dogs-data'></p>" );     // we create a jQuery object with a new paragraph 
     
        dogsdata.html( dogs.breed.name );     // set its inner HTML with jQuery
     
        imgContainer.append( dogsdata );     // and append this to our container
     
        body.append( dogsdata );     // finally we append the container to the "body" of our document
      }
    } );
    2) Code
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <!DOCTYPE html>
    <html lang="en">
     <head>
        <meta charset="utf-8">
        <title>Dogs</title>
        <link rel="stylesheet" href="style.css">
      </head>
     
      <body>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="script.js"></script>
      </body>
    </html>

    3) Code CSS
    Code css : 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
    * {
      margin: 0;
      padding: 0;
    }
     
    body {
      background: black;
      text-align: center;
      line-height: 0;
    }
     
    .img-container {
      display: inline-block;
      position: relative;
      overflow: hidden;
      cursor: pointer;
    }
     
    .dogs-data {
      position: absolute;
      bottom: 0;
      left: -120%;
      width: 100%;
      height: 50px;
      background: rgba( 0, 0, 0, 0.3 );
     
      padding-left: 10px;
      text-align: left;
      color: white;
      font-family: sans-serif;
      font-size: 20px;
      line-height: 24px;
     
      transition: left 0.3s ease-in;
    }
     
    .img-container:hover .dogs-data {
      left: 0;
    }

    Pourriez-vous m'aider à comprendre ce qui ne fonctionne pas s'il vous plaît ?

    Merci d'avance

  2. #2
    Expert confirmé Avatar de Toufik83
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Janvier 2012
    Messages
    2 513
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 42
    Localisation : Maroc

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Janvier 2012
    Messages : 2 513
    Par défaut
    Salut,

    Dans le fichier css ajoute cette ligne
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
     
    .img-container img{width:100px;height:100px}

    puis le fichier js
    Code : 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
     
    $(document).ready(function(){
     
    	var dogs,body=$( "body" )
    	,dog,imgContainer,img
    	,dogsdata=$( "<p class='dogs-data'></p>" );
     
    	$.getJSON( "https://api.thedogapi.com/v1/images/search?limit=50&page=50&order=Desc", function( json ) {
    	    console.log( json ); // print data in the console
    	    dogs = json; //the variable dogs uses the document json 
     
    	    for( var i = 0; i< json.length; i = i + 1 ) {   // loop through each dogs in our "breeds" array
     
    		dog = dogs[ i ];     // store the current dog in a variable
    		imgContainer = $( "<div class='img-container'></div>" ); // we create a container for the dog image and its data
    		img = $( "<img>" );     // we create a jQuery object with an "img" element
    		img.attr( "src", dog.url);   // set its "src" attribute with a jquery method
    		imgContainer.append( img );     // and append this element to our container
    		dogsdata.html( dog.breeds[0]?dog.breeds[0].name:"" );     // set its inner HTML with jQuery
    		imgContainer.append( dogsdata );     // and append this to our container
    		body.append( imgContainer );     // finally we append the container to the "body" of our document
    	    }
          });
     
    });

  3. #3
    Membre habitué
    Femme Profil pro
    Étudiant
    Inscrit en
    Janvier 2019
    Messages
    8
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Âge : 27
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Janvier 2019
    Messages : 8
    Par défaut
    Salut,

    Merci beaucoup de ta réponse en effet cela fonctionne comme je voulais ! Est-ce que tu pourrais m'expliquer ce qu'il manquait et la signification de ces lignes s'il te plaît ? :

    1)
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    $(document).ready(function(){
    2)
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    var dogs,body=$( "body" )
    	,dog,imgContainer,img
    	,dogsdata=$( "<p class='dogs-data'></p>" );
    --> ici je ne comprends pas la signification des virgules au début ?
    --> Pourquoi cette ligne était-elle à rajouter ?

    3) Pourquoi enlever systématiquement var ??

    4) Pourquoi avoir remplacé
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
        dogsdata.html( dogs.breed.name );     // set its inner HTML with jQuery
    par
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    		dogsdata.html( dog.breeds[0]?dog.breeds[0].name:"" );     // set its inner HTML with jQuery
    --> à quoi sert ?

    Merci d'avance pour tes réponses

  4. #4
    Expert confirmé Avatar de Toufik83
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Janvier 2012
    Messages
    2 513
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 42
    Localisation : Maroc

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Janvier 2012
    Messages : 2 513
    Par défaut
    1- Cette fonction est exécutée quand le document est prêt (chargé)
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
     
    $(document).ready(function(){
        /*normalement tout le code js doit être ici*/
    });
    2 et 3 La déclaration des variables peut se faire avec deux manières, soit var a="valeur";var b="valeur" ou en séparant les noms des variables avec une virgule (,) sans répéter le mot "var"
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
     
    var dogs,body=$( "body" )
      ,dog,imgContainer,img
      ,dogsdata=$( "<p class='dogs-data'></p>" );
    // ou
    var dogs; var body; var dog; var ...
    4-Si tu vérifies les items de ton objet json, il n y a pas de variable breed, il y a plutôt breeds (avec s à la fin), et ce n'est pas tout car cette variable elle peut être un tableau vide [], donc il faut d'abord vérifier qu'elle contient au moins un item.

    La ligne :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
     
    dogsdata.html( dog.breeds[0]?dog.breeds[0].name:"" );
    est équivalente à
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
     
    if(dog.breeds[0]!=undefined){
        dogsdata.html(dog.breeds[0].name);
    }else{
        dogsdata.html('');
    }
    ça s'appelle les opérateurs conditionnels ou ternaires.

  5. #5
    Membre habitué
    Femme Profil pro
    Étudiant
    Inscrit en
    Janvier 2019
    Messages
    8
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Âge : 27
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Janvier 2019
    Messages : 8
    Par défaut
    Je te remercie de ta réponse très claire et très bien expliquée !

    Encore merci de ton aide et bonne soirée

  6. #6
    Expert confirmé Avatar de Toufik83
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Janvier 2012
    Messages
    2 513
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 42
    Localisation : Maroc

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Janvier 2012
    Messages : 2 513
    Par défaut
    de rien, si ton souci est résolu n'oublie pas d'appuyer sur le bouton en bas de la page.

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. aide sur un code Mysql+
    Par flo1084 dans le forum Bibliothèques
    Réponses: 1
    Dernier message: 24/10/2006, 09h54
  2. [C# 1.1] Aide sur un code C# 2005
    Par Filipegomes dans le forum Windows Forms
    Réponses: 4
    Dernier message: 18/10/2006, 14h33
  3. Explication sur du code javascript
    Par griese dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 21/07/2006, 09h40
  4. [VB6] Aide sur un code
    Par Lucas42 dans le forum VB 6 et antérieur
    Réponses: 6
    Dernier message: 10/05/2006, 14h54
  5. droits sur un code javascript ?
    Par SpaceFrog dans le forum Général JavaScript
    Réponses: 5
    Dernier message: 30/12/2005, 11h08

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo