1

这是我的jsfiddle。

我可以让两个 div 切换，然后将另一个 div 重置为其原始 img，但我不能为 3 个或更多 div 执行此操作。我的 eq 方法做错了，但不确定是什么。

HTML：

<div class="home">
    <img src="http://www.misfitpsycles.com/blog/wp-content/uploads/2011/09/Red-Circle.jpg">
    <img style="display:none;" src="http://tribute.dbclay.com/img/badjorx/black-circle.jpg">
</div>
<div class="myPlayer">
    <img src="http://upload.wikimedia.org/wikipedia/commons/d/d5/Blue_Circle_o.jpg">
    <img style="display:none;" src="http://i00.i.aliimg.com/img/pb/301/829/308/308829301_525.jpg">
</div>
<div class="myCareer">
    <img src="http://farm3.staticflickr.com/2226/1667080567_172c7871d3.jpg">
    <img style="display:none;" src="http://www.venatu.com/images/ge/purple-circle.png">
</div>

查询：

$('div').click(function(){
    $(this).find('img:hidden').addClass('tofadein');
    $(this).find('img:visible').addClass('tofadeout');
    $(this).find('img.tofadein').fadeIn();
    $(this).find('img.tofadeout').fadeOut();
    $(this).find('img').removeClass();  

    $(this).siblings('div').find('img').eq(0).fadeIn();
    $(this).siblings('div').find('img').eq(1).fadeOut();
    $(this).siblings('div').find('img').eq(2).fadeOut();
});
4

1 回答 1

1

我认为这个小提琴完成了你想要做的事情：

JSFIDDLE

基本上关键是添加一个 each 函数来做你已经对每个兄弟姐妹做的事情。我还从兄弟函数中删除了 div ，但这只是因为在示例中它不是必需的。您可能仍然需要在实际代码中使用它。最后，不存在 .eq(2)。猜猜你正在试验那个。

这是新的js

$('div').click(function(){
    $(this).find('img:hidden').addClass('tofadein');
    $(this).find('img:visible').addClass('tofadeout');
    $(this).find('img.tofadein').fadeIn();
    $(this).find('img.tofadeout').fadeOut();
    $(this).find('img').removeClass('tofadein').removeClass('tofadeout');

    $(this).siblings().each(function(){
        $(this).find('img').eq(0).fadeIn();
        $(this).find('img').eq(1).fadeOut();
    });
});
于 2013-08-09T19:43:58.633 回答