同じIDを持つ要素のフェーディング

Question

このコードに問題があります。

1. "portfolioImage"クラスの要素をクリックして機能を開始します。
2. "image"クラスのすべての要素をフェードアウトします。
3. class "image"と "portfolioImage"のIDを持つ要素をフェードインします（portfolioImageのidが3であるため、クラスイメージと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*/}); 
}); 

}）;

- David

Answer 1

IDは一意である必要があります試してみてください！しかし、あなたは...

代わりのデータ-IDまたはその代わりに任意のデータ-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. あなたはeachは方法であり、あなたがプロパティとしてそれを使用しようとすると、それにfadeOutメソッドを呼び出しているため、エラーがスローされますthis.idまたは
2. $("div.image").each.fadeOut$(this).attr('id')を使用してIDを盗んことができます。 $("div.image").fadeOut()は、選択したすべての要素に対してfadeOutを実行するため、eachを使用する必要はありません。

この

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