jQuery를 사용하여 이미지 소스 변경

질문 : jQuery를 사용하여 이미지 소스 변경

---

내 DOM은 다음과 같습니다.

<div id="d1">
   <div class="c1">
            <a href="#"><img src="img1_on.gif"></a>
            <a href="#"><img src="img2_on.gif"></a>
   </div>
</div>

누군가 이미지를 클릭하면 이미지 src가 <img src="imgx_off.gif"> 로 변경되기를 원합니다. 여기서 x 는 이미지 번호 1 또는 2를 나타냅니다.

이것이 가능합니까 아니면 이미지를 변경하기 위해 CSS를 사용해야합니까?

답변

---

jQuery의 attr () 함수를 사용할 수 있습니다. 예를 들어 img id 속성이있는 경우 다음을 수행합니다.

<img id="my_image" src="first.jpg"/>

그런 다음 다음과 같이 jQuery를 사용하여 이미지 src

$("#my_image").attr("src","second.jpg");

click 이벤트에 첨부하려면 다음과 같이 작성할 수 있습니다.

$('#my_image').on({
    'click': function(){
        $('#my_image').attr('src','second.jpg');
    }
});

이미지를 회전하려면 다음을 수행하십시오.

$('img').on({
    'click': function() {
         var src = ($(this).attr('src') === 'img1_on.jpg')
            ? 'img2_on.jpg'
            : 'img1_on.jpg';
         $(this).attr('src', src);
    }
});

출처 : https://stackoverflow.com/questions/554273/changing-the-image-source-using-jquery