Затухание в элементе с тем же идентификатором

Question

У меня проблемы с этим кодом.Предполагается сделать это:

1. Запустите функцию, щелкнув элемент с классом «portfolioImage».
2. Исчезните все элементы с классом «image».
3. Добавление элемента с классом «изображение» и идентификатором «portfolioImage» (допустим, идентификатор идентификатор портфолио равен 3, поэтому добавьте элементы с изображением класса и идентификатором 3).
4. Исчезнитеэлемент с идентификатором «portfolioHolder» и исчезает в другом элементе с классом «details».

Parenting: #portfolioHolder (отображается в начале функции) .portfolioImage #details (невидим в началефункция) .image

Мой код:

$(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*/});
});

});

- Дэвид

Answer 1

ID должны быть уникальными! Но вместо этого вы можете использовать data-id или любой data-X ...

Вместо:

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

использование:

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

и JS:

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

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

должно быть правильно

Answer 2

У вас есть пара проблем в вашем коде.

1. Вы можете получить идентификатор, используя this.id или $(this).attr('id')
2. $("div.image").each.fadeOut выдаст ошибку, потому что each - это метод, и вы пытаетесь использовать его как свойство и вызываете для него метод fadeOut. Вам не нужно использовать each здесь, потому что $("div.image").fadeOut() позаботится о запуске fadeOut на всех выбранных элементах.

Попробуйте это

$(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*/});
  });
});