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？

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

demo

Answer 3

Here is my solution

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

显示和隐藏图像（切换图像）

3 个答案: