Besoin d'aide pour une meilleure pratique Codes Jquery

Question

J'essaie d'améliorer le rendu de mes codes jquery ici. Mes fonctions fonctionnent correctement mais je me demandais si quelqu'un pouvait rendre mes codes moins moche. Merci beaucoup!

HTML

<div class='image_layout'> 
    <a href='#'><img src=' a.jpg '/></a> 
      <br><p class='credits'>hahahah 
      <br>Agency: Agency1 
      <br>Picture ID: 5 </p> 
</div> 

jQuery

$('#image_layout').on('hover', 'img', function() { 
    $(this).parent().next().next().fadeIn('fast'); 
}) 
$('#image_layout').on('mouseout', 'img', function() { 
    $(this).parent().next().next().fadeOut('fast'); 
})​ 

Answer 1

Vous pouvez passer deux fonctions à vol stationnaire jQuery - un pour mousein, un pour mouseout. Vous pouvez effectuer cette modification tant que vous n'avez pas d'images ajoutées dynamiquement. Votre code serait également beaucoup plus simple si l'élément que vous Fading a une carte d'identité ou de la classe:

$('#image_layout img').hover(
    function() { 
     $(this).closest('.someClass').fadeIn('fast'); 
    }, 
    function() { 
     $(this).closest('.someClass').fadeOut('fast'); 
    } 
); 

Answer 2

J'utiliser .eq par opposition à deux next déclarations, en outre, vol stationnaire prend deux fonctions, la première étant pour l'événement mouseenter, et le second pour mouseout

$('#image_layout').hover('hover', 'img', function() { 
    $(this).parent().eq(2).fadeIn('fast'); 
}, function() { 
    $(this).parent().eq(2).fadeOut('fast'); 
}) 

Références

• Take a look at eq here
• Read over hover here

Answer 3

$('.image_layout').on('hover', 'img', function (e) { 
    if(e.type == 'mouseover') { 
     $(this).closest('.image_layout').find('.credits').stop().fadeIn('fast'); 
    } else { 
     $(this).closest('.image_layout').find('.credits').stop().fadeOut('fast'); 
    } 
}) 

Vous pouvez également avoir fait:

$('.image_layout').on('hover', 'img', function() { 
    $(this).closest('.image_layout').find('.credits').stop().fadeIn('fast'); 
}, function() { 
    $(this).closest('.image_layout').find('.credits').stop().fadeOut('fast'); 
}); 

Si vous êtes sûr que rien d'autre que l'image planant provoquera l'élément à disparaître, vous pouvez simplement écrire:

$('.image_layout').on('hover', 'img', function() { 
    $(this).closest('.image_layout').find('.credits').stop().fadeToggle('fast'); 
}); 

Answer 4

Regardez dans Douglas Crockford's JS Style Guide. Il ferait votre code ressembler (avec des améliorations):

var obj = $('#image_layout img'); 
obj.mouseover(function(){ 
    $(this).parent([selector]).next([selector]).fadeIn('fast'); 
}); 

obj.mouseout(function(){ 
    $(this).parent([selector]).next([selector]).fadeOut('fast'); 
}); 

Vous n'avez pas besoin on, il suffit d'appeler directement la fonction.