jquery - 画像の表示と非表示 (画像の切り替え)

Question

デフォルトで非表示になっている 3 つの画像があるとします。アイコンをクリックすると、画像が表示されます。デモは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();
});