Accrocher un event à un li

Par AswadSaadi, il y a 10 ans

Javascript

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, il y a 10 ans

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.

AswadSaadi, il y a 10 ans

Bonjour,

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

Lartak, il y a 10 ans

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

Benjamin Derepas, il y a 10 ans

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

AswadSaadi, il y a 10 ans

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

AswadSaadi, il y a 10 ans

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

Benjamin Derepas, il y a 10 ans

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