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();                           

        }

    });

})​

这是你的意图吗？

Answer 2

下面的方法怎么样？使用更少的 JavaScript。

html

<div class="content">
    <div class="slide">
        <p>text 1<img src="http://www.moosemash.de/images/magnifier.jpg" height="27" width="30"></p>
        <img class="slideImage" 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="slideImage" 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="slideImage" src="http://www.moosemash.de/images/img83.jpg">
    </div>
</div>
​

js

 $('.content p img').on("click", function(){
     $('.slide').removeClass('active');
     $(this).closest('.slide').addClass('active');
 })​;

css

.slideImage{
    display: none;
    position: "absolute",
    left: "0",
    top: "0",
}

.active .slideImage{
    display: block;
}

.active > *:not(.slideImage) {
    display: none;
}​

演示

Answer 3

这是我的解决方案

html:

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

Javascript：

$('.content .slideshow').hide();
$('.content p img').on("click", function() {
    var index = $(".content p img").index(this);

    $("img.current").removeClass("current").hide();
    $("p.current").removeClass("current").show();

    var p = $(this).parent();
    var i = p.next();
    p.addClass("current").hide();
    i.addClass("current").show();
});