具有相同ID的元素逐渐消失

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

You have couple of issues in your code.

1. You can retreive the id using this.id or $(this).attr('id')
2. $("div.image").each.fadeOut will throw an error because each is a method and you are trying to use it as a property and calling fadeOut method on it. You don't have to use each here because $("div.image").fadeOut() will take care of running fadeOut on all the selected elements.

Try this

$(function(){
   $("div.portfolioImage").click(function(){
      var id = this.id;

      $("div#portfolioHolder").fadeOut('slow', function() {
          // Animation complete.
      });
      $("div#details").fadeIn('slow', function() {
          // Animation complete.
      });
      $("div.image").fadeOut('slow', function(){/*complete*/});
      $("div.image#"+id).fadeIn('slow', function(){/*complete*/});
  });
});

Answer 2

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