サムネイル画像はクリック時に現在の画像と交換する必要があります

Question

私はcodepenリンクhttps://codepen.io/robgolbeck/pen/bVGmopを持っています。私が欲しいのは、親指をクリックすると大きな画像がクリックされた親指の画像に置き換えられ、親指のリストには存在してはいけないということです。合計でわずか5枚の画像が回転中に表示されますが、ここでは6枚親指で5回以上繰り返す）。私はJSを微調整しようとしましたが、期待どおりに動作しません。誰でも助けてもらえますか？朝からこの問題に固執しています。前もって感謝します。

JS

$('#thumbs img').click(function(){ 
    $('#largeImage').attr('src',$(this).attr('src').replace('thumb','large')); 
    $(this).attr('src',$('#largeImage').attr('src').replace('large','thumb')); 
}); 

Answer 1

最初にすべての画像を表示し、次に現在の画像を隠すことができます。あなたが最初の画像をクリックするトリガを開始することができます。

$('#thumbs img').click(function(){ 
    $('#largeImage').attr('src',$(this).attr('src').replace('thumb','large')); 
    $('#description').html($(this).attr('alt')); 
    $('#thumbs img').show(); 
    $(this).hide(); 
}); 
$('#thumbs img').first().trigger('click'); 

Answer 2

私はスニペット以下に示すよう小道具方法を使用してみてください、jQueryののATTR方法が問題を引き起こしていると思う：

#thumbs imgのクリックハンドラのイベントで

$('#thumbs img').click(function(){ 
    $('#largeImage').prop('src',$(this).prop('src').replace('thumb','large'));; 
    $('#description').html($(this).prop('alt')); 
}); 

Answer 3

$('#thumbs img').click(function(){ 

    $("#thumbs img").each(function(){$(this).show();}); 
    $('#largeImage').attr('src',$(this).attr('src').replace('thumb','large')); 
    $('#description').html($(this).attr('alt')); 

    $(this).hide(); 
}); 

Answer 4

あなたは、単にjQuerys show()とhide()メソッドを使用することができます。最初に#thumbsの子要素をすべて表示し、現在クリックされている要素を$(this).hide();で非表示にします。当初は最初の画像を非表示にするには

、あなたは$('#thumbs').children().first().hide();

$('#thumbs').children().first().hide(); 
 
$('#thumbs img').click(function() { 
 
    $('#largeImage').attr('src', $(this).attr('src').replace('thumb', 'large')); 
 
    $('#description').html($(this).attr('alt')); 
 
    $('#thumbs').children().show(); 
 
    $(this).hide(); 
 
});

#thumbs { 
 
    padding-top: 10px; 
 
    overflow: hidden; 
 
} 
 

 
#thumbs img, 
 
#largeImage { 
 
    border: 1px solid gray; 
 
    padding: 4px; 
 
    background-color: white; 
 
    cursor: pointer; 
 
} 
 

 
#thumbs img { 
 
    float: left; 
 
    margin-right: 6px; 
 
} 
 

 
#description { 
 
    background: black; 
 
    color: white; 
 
    position: absolute; 
 
    bottom: 0; 
 
    padding: 10px 20px; 
 
    width: 525px; 
 
    margin: 5px; 
 
} 
 

 
#panel { 
 
    position: relative; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="gallery"> 
 
    <div id="panel"> 
 
    <img id="largeImage" src="http://robgolbeck.com/demos/image-swap/image_01_large.jpg" /> 
 
    </div> 
 
    <div id="thumbs"> 
 
    <img src="http://robgolbeck.com/demos/image-swap/image_01_thumb.jpg" alt="1st image description" /> 
 
    <img src="http://robgolbeck.com/demos/image-swap/image_02_thumb.jpg" alt="2nd image description" /> 
 
    <img src="http://robgolbeck.com/demos/image-swap/image_03_thumb.jpg" alt="3rd image description" /> 
 
    <img src="http://robgolbeck.com/demos/image-swap/image_04_thumb.jpg" alt="4th image description" /> 
 
    <img src="http://robgolbeck.com/demos/image-swap/image_05_thumb.jpg" alt="5th image description" /> 
 
    </div> 
 
</div>