Bonjour,

Tout d'abord je ne suis pas très bon en JS mais je connais les bases. Je rencontre actuellement un problème qui est que lors du survol des li, rien ne se passe, je ne sais pas pourquoi

Voici le script

<script type="text/javascript">
    $('li').hover(function(){
        console.log('123 soleil');
        $(this).fadeOut( 100 );
        $(this).fadeIn( 500 );

    });
</script>
<div class="row col-md-10 col-md-offset-1 col-lg-10 col-lg-offset-1 col-sm-10 col-sm-offset-1">
    <div class="panel panel-info">
                <?php
                    $res = "";
                    if(empty($element)){
                         $res .= "<div class='panel-heading'><h3 class='panel-title'>Pas d'articles pour la catégorie ". $libArt ."</h3></div><div class='panel-body'>";
                    }   
                    else{
                        $res .= "<div class='panel-heading'><h3 class='panel-title'>Articles pour la catégorie ". $libArt ."</h3></div><div class='panel-body'><ul>";

                        foreach ($element as $key => $value) {
                          $link = $this->Html->link($value['Article']['libelle'],array('controller'=>'article', 'action'=>'show', $value['Article']['id']));
                         $res .= "<li class='corps'>". $link ."</li>";
                        }
                    }
                    $res.= "</ul>";
                    echo($res);
                ?>
            </div>
        </div>

    <?php echo $this->Html->Link('Retour', $url, array('class' => 'btn btn-info')); ?>

</div>

Je cherche donc à atteindre mes li avec le script mais avec mon code actuel, il n'y a que les li de ma barre de navigation qui sont actionnés.

7 réponses


Lartak
Réponse acceptée

Ton script, tu le place bien juste avant la fin de la fermeture de la balise body ?

Bonjour.
Pour commencer, tu devrais éviter de faire une sélection aussi large.
Étant donné que tu as une classe sur tes li et s'il n'y a que cette liste qui a cette classe, tu devrais restreindre la sélection sur cette classe, donc par exemple :

$('li.corps').hover(function(){
    /* ... */
});

Sinon, ta fonction sera effective sur n'importe quelle liste que tu auras sur tes pages.

Bonjour,

J'ai essayé cette facon aussi d'ou la classe sur le li mais j'ai toujours le même résultat

Le html

<li class="corps"> un truc super </li>
<li class="corps">un autre truc super </li>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

le js

$(function(){
    $(".corps").on('hover',function(){
        // faire un super truc
    });
})

En gros :

  • vérifier que jQuery est bien chargé
  • selectionner les li ayant la classe corps
  • lié un eventListener (hover)
  • faire un truc cool

Si ça ne fonctionne pas (ce qui serait très étrange), regarde ton inspecteur d'élément et cherches l'erreur.

cordialement

Non, il est juste avant la premiere div avec la class "row"

J'ai changé la place de mon script et c'est bon ça fonctionne. Je pourrais cependant savoir pourquoi ça fait ça?

Par habitude on met les scripts en bas de page, car les appelles via des scripts externes (comme jQuery importé depuis google) peuvent bloquer le chargement du DOM