afficher la div enfant de la classe survolée sur collection d'image

driven78
Javascript

Bonjour à tous,
voici mon problème

Imaginions une succession de div portant une image placé en float left, dans lequel serait placé une div (detailProduit) qui serait le contenu d'un resultat appellé en ajax

<div id="collection">
    <div class="product" data-id="1">
        <div class="detailProduct"></div>
            <a href=""><img src =""></a>
        </div>
    </div>
    <div class="product">
        <div class="detailProduct" data-id="2"></div>
            <a href=""><img src =""></a>
        </div>
    </div>
    <div class="product">
        <div class="detailProduct" data-id="3"></div>
            <a href=""><img src =""></a>
        </div>
    </div>
</div>

le but ici serait tous simple, au survol de l'image, le contenu de la div(detailProduit) apparait
Je n'ai pas de probleme pour le faire apparaitre, le résultat est bien chargé en ajax, seulement le souci, ici présent
est que toutes mes div ou est placé la fonction hover portent la même classe et donc au survol, c'est la premiere div qui charge le contenu 

$(document).ready(function(){
    $(".product").hover(
        function(){
            var data = $(this).data("id");
            var ff = $(this).parents("div:first").children(".detailProduct");
            $.ajax({
                type : "GET",
                url : "./includes/detailProduct.php",
                data : data,
                success: function(server_response){
                      ff.html(server_response).show();      
                }
            });
        },
        function () {
            $(".detailProduct").hide();
        }
    );
});

je voudrais afficher la div enfant de la classe survolée, mais ca ne fonctionne pas, une idée?
Merci d'avance à ceux qui se pencheront sur mon probleme
Cordialement

3 réponses

Pewel-OutOfNutella

Déjà tu as une faute de nom de div :)
Dans ton html, tes div ont comme class "detailProduit" et dans ton js tu met "detailProduct".

Après, si ça ne fonctionne toujours pas, essaye avec un

$(this).parents("div:first").find(".detailProduit");

au lieu d'un 

$(this).parents("div:first").children(".detailProduit");
driven78
Auteur

merci pewel
le div (#detailProduit) s'affiche bien au survol de la class product,
seulement il s'affiche tjrs dans la premiere class et non dans celle que je survole
qui plus est, je n'arrive pas a récupérer la valeur de "data-id" attaché à la class "Product"

edit: pr la faute j'ai editer le premier post, mais c'est un exemple, l'erreur ne vient pas de la

Pewel-OutOfNutella

Attention ! Tu met un point devant "data-id", ce n'est pas une classe.
Il faut écrire ça :

var data = $(this).attr("data-id");

Ensuite, il faut mettre tes data-id sur ton élement "product", puisque le "$(this).attr(..." affecte l'élement courant, donc l'élement ayant pour classe "product"
J'ai créé un fiddle pour résumer tout ça, tu peux t'en inspirer.

Ca se passe ici