lundi 29 juin 2015

Optimize logic of jQuery Code

I have a very illogical jQuery code and I want to see if someone finds a better way to do the exact same thing:

jQuery:

$(".col-md-3 img").hover(function() {
    $(this).parent().children(".search").show();
    $(this).parent().children(".photo").css("opacity","0.4");
}, function(){
    $(this).parent().children(".search").hide();
    $(this).parent().children(".photo").css("opacity","1");
});

HTLM corresponding to this code:

<div class="col-md-3">
    <img class="photo" src="img/1_small.jpg" alt="img" />
    <img class="search hidden-xs" src="img/search.png" width="50px"/> 
</div>

I have multiple similar divs.

EDIT:

I don't like the fact that I am accessing the DOM many times with:

$(this).parent().children();

I'm going back and forth and I think it might be a better solution.

The problem with the siblings is that one image is on the other, with position absolute and this causes some errors on the jQuery. The live website you can see here: live

Aucun commentaire:

Enregistrer un commentaire