Question

I am having troubles with this code. It’s supposed to do this:

1. Start the function with clicking on an element with class “portfolioImage”.
2. Fade out all the elements with class “image”.
3. Fade in element with class “image” and id of the “portfolioImage” (lets say the id of portfolioImage is 3, so fade in the elements that has class image and id 3).
4. Fade out an element with id “portfolioHolder” and fade in another element with class “details”.

Parenting:
#portfolioHolder (visible at the start of the function)
.portfolioImage
#details (invisible at the start of the function)
.image

My Code:

$(function(){
$("div.portfolioImage").click(function(){
    var id = $(this).id;
    window.print($(this).id);
    $("div#portfolioHolder").fadeOut('slow', function() {
        // Animation complete.
    });
    $("div#details").fadeIn('slow', function() {
        // Animation complete.
    });
    $("div.image").each.fadeOut('slow', function(){/*complete*/});
    $("div.image#"+id.toString()).fadeIn('slow', function(){/*complete*/});
});

});

— David

Answer 1

IDs should be unique! But you can use data-id or any data-X instead…

Instead of:

<div class="portfolioImage" id="3">...</div>
<div class="image" id="3">...</div>

use:

<div class="portfolioImage" id="image3">...</div>
<div class="image" data-id="image3">...</div>

and the JS:

$('.portfolioImage').click(function(){
   var id = $(this).attr('id');

   $('.image').fadeOut('slow');
   $('.image[data-id='+id+']').fadeIn('slow');
   $('#portfolioHolder').fadeOut('slow');
   $('.details').fadeIn('slow');
});

should be right