2012-01-10 8 views
-1

HTML 구조 :jquery로 src 값을 변경하는 방법은 무엇입니까?

<div class="myimages"> 
    <div id="mainimg"><img src="images/Pic/1.jpg"></div> 
    <div id="addimg"> 
     <li class="addimg"><img src="images/Pic/1_01.jpg"></li> 
     <li class="addimg"><img src="images/Pic/1_02.jpg"></li> 
     <li class="addimg"><img src="images/Pic/1_03.jpg"></li> 

    </div> 
</div> 

어떻게 IMG의 SRC의 값을 변경합니다 (<div id="mainimg">에있는) 때 리에서 마우스 호버 jquery.namely에 의해 addimg에있는 경우 두 번째 리튬에 마우스를 가져가, <div id="mainimg"><img src="images/Pic/1.jpg"></div><div id="mainimg"><img src="images/Pic/1_02.jpg"></div>으로 변경됩니다. 언제 첫 번째 또는 세 번째 li. 변화는 동일합니다. 당신이에 이벤트 처리기를 바인딩 할 수 있습니다, 당신이 li 떨어져 마우스를 이동할 때 이미지가 다시 1.jpg을 변경하지 않으 가정

jQuery('li.addimg').onmouseover(function() { 
    jQuery('#mainimg img').attr('src', jQuery(this).children('img').attr('src')); 
} 
+2

당신은 JQuery와의 조작 기능을 숙지 할 수 있습니다. http://api.jquery.com/category/manipulation/ – kontur

답변

5

뭔가 작업을해야합니다 :

,
$('li.addimg').hover(function() { 
    var src = $(this).find('img').attr('src'); 
    $('#mainimg img').attr('src', src); 
}); 

우리는 그 리의 호버 이벤트를 잡아 내고 호버가 트리거 된 li의 내부에있는 img의 src를 잡아서 id가있는 div의 img의 새 src로 설정합니다 "mainimg"

0

그것은이 같은해야합니다 감사합니다 mouseover 이벤트와 li의 하나를 사용하여 이미지를 대체 할 replaceWith를 사용

이 같은
$("li.addimg").mouseover(function() { 
    $("#mainimg img").replaceWith($(this).find("img")); 
}); 
0

: 당신이

1

이 시도 :

$('.addimg').mouseover(function() { 
    $('.mainimg img').attr('src', $(this).find('img').attr('src')); 
}); 
1

당신이 AAS에 따라 달성 할 수

$(".adding").hover(function() { 
     var hoverImg = HoverImgOf($(this).attr("src")); 
     $("#mainimg img").attr("src", hoverImg); 
    } 
관련 문제