속성을 jQuery의 색인 값으로 바꾸기

Question

하나의 이미지가있는 컨테이너 근처에 이미지 (엄지 손가락) 목록이 있습니다. jQuery가 <a> 요소의 색인을 계산 한 다음 아래 이미지의 src 속성 번호를 바꾸기를 원합니다.

는이 코드를 고려, 의미 : 사용자가 두 번째 <a>를 클릭 할 때

<ul class="thumbs"> 
    <li><a href="#"><img src="img1.jpg" alt="image here"/></a></li> 
    <li><a href="#"><img src="img2.jpg" alt="image here"/></a></li> 
    <li><a href="#"><img src="img3.jpg" alt="image here"/></a></li> 
    <li><a href="#"><img src="img4.jpg" alt="image here"/></a></li> 
</ul> 

<div class="container"> 
    <img src="img1.jpg" alt="destiny image here"/> 
</div> 

예상되는 동작입니다, img1.jpg에 .container img 변화의 src 속성을. 네 번째를 클릭하면 의 속성이 img3.jpg으로 변경됩니다.

나는 여기까지 가지고있다 : jsFiddle demo

$(document).ready(function() { 
    $(".thumbs li a").click(function() { 
     //$('div.container').toggleClass('on'); 
     var index = $(".thumbs li a").index(this); 
     $("div.container img[src^='img']").replaceWith("img" + index + ".jpg"); 
    }); 
}); 

그것은 절대적으로 아무것도하지 않습니다하지 않습니다. 나는 .replaceWith 메서드를 제대로 이해한다고 생각하지 않습니다.

또한 주석 달린 줄은 혼자있을 때 잘 작동합니다 ... 나머지 코드가있는 경우 div.container 클래스를 변경하지 마십시오. 변수를 선언하는 방식과 관련이 있습니까?

Answer 1

속성을 바꾸지 않고 img 요소를 대체합니다.

.attr('src', value)으로 속성을 설정해야합니다.

replaceWith()은 다른 html 요소로 요소를 대체하기위한 것입니다.

Answer 2

간단하게 색인을 제거하십시오. src을 사용해보세요.

$(document).ready(function() { 
    $(".thumbs li a").click(function() { 
     //Get the src of the clicked image 
     var src = $(this).find('img').attr('src'); 

     //Set the src to the container image 
     $("div.container img").attr('src', src); 
    }); 
}); 

데모 : http://jsfiddle.net/Stijntjhe/HvTpv/5/