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

Question

我在使用此代码时遇到麻烦。 应该这样做：

1. 单击具有“ portfolioImage”类的元素以启动该功能。
2. 淡出“ image”类的所有元素。
3. 淡入具有类“ image”和“ portfolioImage”的id的元素（可以说PortfolioImage的id为3，因此淡入具有class image和id 3的元素）。
4. 淡出ID为“ portfolioHolder”的元素，淡入为类“ details”的另一个元素。

育儿：#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

您的代码中有几个问题。

1. 您可以使用this.id或$(this).attr('id')获取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*/});
  });
});

Answer 2

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');
});

应该是对的