Question

我遇到了这段代码的麻烦。它应该这样做：

点击具有“portfolioImage”类的元素启动该功能。
使用“image”类淡出所有元素。
使用类“image”和“portfolioImage”的id淡入元素（假设portfolioImage的id为3，因此淡入具有类图像和id 3的元素。）
淡出一个ID为“portfolioHolder”的元素，淡入另一个带有“details”类的元素。

育儿： #portfolioHolder（在函数开头可见） .portfolioImage #details（在函数开头不可见）图像配

我的代码：

$(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

您的代码中存在几个问题。

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

应该是对的

具有相同id的元素淡入淡出

2 个答案: