jquery 함수를 사용하여 갤러리 축소판을 동적 ID에서 변경하는 방법은 무엇입니까?

Question

내 웹 사이트 용 갤러리를 만들려고했지만 동적 ID의 큰 이미지로 축소판을 변경하면 문제를 해결할 수 없습니다.

내가 두 정렬되지 않은 목록을 분리했다 : 여기

는 내가하고 싶은 것입니다. 첫 번째는 큰 그림을, 두 번째 그림은 엄지 손가락을 잡습니다. 두 목록 항목은 동일한 ID 번호이지만 다른 ID 이름을가집니다. 큰 그림의 ID는 미리보기 -1, 미리보기 -2 등이며 미리보기 이미지 ID는 미리보기 이미지 -1, 미리보기 이미지 -2 등입니다.

사용자가 클릭 할 때 동일한 ID 번호의 큰 이미지를 변경하고 싶습니다.

예 : id = "thumbnail-3"을 클릭하면 큰 이미지가 사라지는 즉시 큰 img id = "preview-3"이 사라집니다. 여기

내 샘플 HTML

<ul class="previews"> 
<li id="preview-10"><a class="gallery product_2 jqzoom" href="foto1_lg.jpg"><img width="314" height="450" src="foto1.jpg"></a></li> 
<li id="preview-11"><a class="gallery product_2 jqzoom" href="foto2_lg.jpg"><img width="314" height="450" src="foto2.jpg"></a></li> 
<li id="preview-12"><a class="gallery product_2 jqzoom" href="foto3_lg.jpg"><img width="314" height="450" src="foto3.jpg"></a></li> 
<li id="preview-13"><a class="gallery product_2 jqzoom" href="foto4_lg.jpg"><img width="314" height="450" src="foto4.jpg"></a></li> 
<li id="preview-14"><a class="gallery product_2 jqzoom" href="foto5_lg.jpg"><img width="314" height="450" src="foto5.jpg"></a></li> 
<li id="preview-15"><a class="gallery product_2 jqzoom" href="foto6_lg.jpg"><img width="314" height="450" src="foto6.jpg"></a></li> 

이는 큰 이미지 박스

그리고있다 ..입니다

<ul class="thumbnails"> 
<li id="thumbnail-10"><img width="70" height="70" src="tn1.jpg"></li> 
<li id="thumbnail-11"><img width="70" height="70" src="tn2.jpg"></li> 
<li id="thumbnail-12"><img width="70" height="70" src="tn3.jpg"></li> 
<li id="thumbnail-13"><img width="70" height="70" src="tn4.jpg"></li> 
<li id="thumbnail-14"><img width="70" height="70" src="tn5.jpg"></li> 
<li id="thumbnail-15"><img width="70" height="70" src="tn6.jpg"></li> 

작은 이미지입니다.

여러분이 저를 도와 주셨으면합니다.

감사합니다.

가 그런데

업데이트, 선택된 썸네일에 .current 클래스를 추가 할 기회가 있습니까? 이전에 선택한 것들은 사용자가 클릭 할 때 사라져야합니까?

Answer 1

두 목록이 모두 같은 순서 인 경우 미리보기 이미지와 해당 미리보기가 목록의 동일한 위치에있는 경우 이러한 ID를 전혀 사용하지 않아도 문제가 해결 될 수 있습니다. ID

$('ul.thumbnails > li').click(function() { 
    var thumb_number = $(this).index(); 

    $('ul.previews > li:visible').fadeOut('normal', function() { 
      $('ul.previews > li').eq(thumb_number).fadeIn(); 
    }); 
}); 

두 솔루션을 사용하지 않고 ID

$('ul.thumbnails > li').click(function() { 
    var preview_id = 'preview-' + $(this).attr('id').split('-')[1]; 

    $('ul.previews > li:visible').fadeOut('normal', function() { 
      $('#'+preview_id).fadeIn(); 
    }); 
}); 

를 사용

솔루션은 한 번에 볼 적어도 하나의 미리보기가 항상 있다는 것을 의미한다. 그렇지 않으면 fadeIn 함수가 호출되지 않습니다.