FadeTo几种不同的图像

Question

我对网页设计和JQuery.I非常陌生。我尝试使用FadeTo来处理13幅不同的图片，每一张图片在点击它们时都会显示出不同的文本框。例如，一张名为“品孔”的照片会显示一段关于针孔相机的文字，而另一张叫做“模糊”的照片会让人看到一段关于摄像机的文字，等等。

因为某种原因，我无法成功。我尝试了不同的东西，但要么它们都会同时褪色，要么它们都不会像现在这样工作，或者我会得到一个错误信息。以下是我的尝试：

$(document).ready(function(){

$('#pinhole, #obscura, #heliography, #daguerreotype, #calotype, #wetc, #drygel, #kodak1, #leica2, #polaroid, #dslr, #cellphone, #future').click(function(){

    $(pinhole).fadeTo('slow',0.5);
    }, function(){
    $(pinholeText).stop().fadeTo('slow',1);
    }
    );

    $(obscura).fadeTo('slow',0.5);
    }, function(){
    $(obscuraText).stop().fadeTo('slow',1);
    }
    );

    $(heliography).fadeTo('slow',0.5);
    }, function(){
    $(heliographyText).stop().fadeTo('slow',1);
    }
    );

    $(daguerreotype).fadeTo('slow',0.5);
    }, function(){
    $(daguerreotypeText).stop().fadeTo('slow',1);
    }
    );

    $(calotype).fadeTo('slow',0.5);
    }, function(){
    $(calotypeText).stop().fadeTo('slow',1);
    }
    );

    $(wetc).fadeTo('slow',0.5);
    }, function(){
    $(wetcText).stop().fadeTo('slow',1);
    }
    );

    $(drygel).fadeTo('slow',0.5);
    }, function(){
    $(drygelText).stop().fadeTo('slow',1);
    }
    );

    $(kodak1).fadeTo('slow',0.5);
    }, function(){
    $(kodak1Text).stop().fadeTo('slow',1);
    }
    );

    $(leica2).fadeTo('slow',0.5);
    }, function(){
    $(leica2Text).stop().fadeTo('slow',1);
    }
    );

    $(polaroid).fadeTo('slow',0.5);
    }, function(){
    $(polaroidText).stop().fadeTo('slow',1);
    }
    );

    $(dslr).fadeTo('slow',0.5);
    }, function(){
    $(dslrText).stop().fadeTo('slow',1);
    }
    );

    $(cellphone).fadeTo('slow',0.5);
    }, function(){
    $(cellphoneText).stop().fadeTo('slow',1);
    }
    );

    $(future).fadeTo('slow',0.5);
    }, function(){
    $(futureText).stop().fadeTo('slow',1);
    }
    );

});

我试过几个教程，但都没有用。谁能给我个提示吗？那将是非常感谢的！

Answer 1

由于您正在使用click()处理multiple selectors事件，因此需要检查单击了哪个事件，然后针对相应的文本。

$('#pinhole, #obscura, #heliography, #daguerreotype, #calotype, #wetc, #drygel, #kodak1, #leica2, #polaroid, #dslr, #cellphone, #future').click(function(){

    $(this).fadeTo('slow',0.5);

    if($(this).is('#pinhole')){
        $('#pinholeText').fadeTo('slow',1);
    }

    if($(this).is('#obscura')){
        $('#obscuraText').fadeTo('slow',1);
    }
    //and so on...
});

但这将是低效的，因为它类似于一个接一个地做：

$('#pinhole').click(function(){
    $(this).fadeTo('slow',0.5);
    $('#pinholeText').fadeTo('slow',1);
});

$('#obscura').click(function(){
    $(this).fadeTo('slow',0.5);
    $('#obscuraText').fadeTo('slow',1);
});

但是，如果您可以更改标记，并将您的一组img和text包装在<div>中。如下所示：

<div id="pinhole">
    <img id="pinholeImg" src="" />
    <p id="pinholeText">Pinhole text</p>
</div>

那么您的jQuery将是：

$('#pinhole, #obscura, #heliography, #daguerreotype, #calotype, #wetc, #drygel, #kodak1, #leica2, #polaroid, #dslr, #cellphone, #future').click(function(){
    $(this).children('img').fadeTo('slow',0.5).siblings('p').fadeTo('slow',1);
});

参见此小提琴