具有相同编号的元素褪色

我遇到此代码的麻烦。它应该这样做：具有相同编号的元素褪色

启动该功能，点击类“portfolioImage”的元素。
淡出所有具有类“图像”的元素。
使用class“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*/}); 
});

}）;

- 大卫

来源

2012-01-28 David Debnar

如果我没有得到它的错误，你不能有tw o具有相同ID的元素。 – Jashwant 2012-01-28 11:19:42

在jQuery中，您通过像$（this）.attr（'id'）获得属性，而不是$（this）.id – Jashwant 2012-01-28 11:21:14

您可以使用'this.id'来获取元素ID。 – ShankarSangoli 2012-01-28 11:22:13

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

应该是对的

来源

2012-01-28 11:32:50 ahmet2106

感谢您的回答！它几乎是完美的，唯一的是旧的图像元素不会淡出。 – 2012-01-28 12:02:19

现在我知道这是为什么了，这是因为通过消除.image元素的父元素，你也可以淡入淡出所有元素。有什么办法可以淡化父元素吗？ – 2012-01-28 12:16:22

什么是父母要素？也许$（'。image [data-id ='+ id +']'）。fadeIn（'slow'）; $（'。image [data-id ='+ id +'] .image'）。淡出（ '慢'）; – ahmet2106 2012-01-28 13:27:35

你有几个问题在你的代码。

您可以使用retreive或this.id$(this).attr('id')
$("div.image").each.fadeOut因为each是一个方法，你要使用它作为一个属性，并呼吁它fadeOut方法会抛出一个错误的ID。您不必在此处使用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*/}); 
    }); 
});

来源

2012-01-28 11:18:39 ShankarSangoli

具有相同编号的元素褪色

回答

相关问题