jquery - 显示和隐藏图像(切换图像)

Question

假设我有三个默认隐藏的图像。如果我单击该图标，则会显示该图像。 演示在 jsfiddle.

现在的问题是图像显示在底部。我想要的是显示在相应文字的位置。同时，文本和小图标将被隐藏。 例如，单击文本 1 的缩略图，图像显示在顶部。文本 1 和第一个放大镜缩略图隐藏。

感谢您的帮助。

Answer 1

稍微改变一下标记:

<div class="slides">
    <div class="slide">
        <p>text 1<img src="http://www.moosemash.de/images/magnifier.jpg" height="27" width="30"></p>
        <img class="pic" src="http://www.moosemash.de/images/img81.jpg">        
    </div>
    <div class="slide">    
        <p>text 2<img src="http://www.moosemash.de/images/magnifier.jpg" height="27" width="30"></p>        
        <img class="pic" src="http://www.moosemash.de/images/img82.jpg">        
    </div>
    <div class="slide">    
        <p>text 3<img src="http://www.moosemash.de/images/magnifier.jpg" height="27" width="30"></p>        
        <img class="pic" src="http://www.moosemash.de/images/img83.jpg">        
    </div>    
</div>​

和 js:

$('.pic').hide();

$('.slide').on("click", function(event){

    $('.slide').each(function(){

        if(this == event.currentTarget){

            $('p', this).toggle();
            $('.pic', this).fadeToggle();               

        }else{

            $('p', this).show();
            $('.pic', this).hide();                           

        }

    });

})​

Is this what you intended ？