클릭 시 jQuery를 사용하여 이미지 소스를 어떻게 동적으로 변경할 수 있습니까?

jQuery로 이미지 소스 수정

귀하의 목표는 다음 DOM 구조 내에서 이미지 소스를 동적으로 변경하는 것입니다.

<div>

각 이미지를 클릭하면 소스를 "imgx_off.gif"로 변경하려고 합니다. 여기서 "x"는 "1" 또는 "2."

해결책: jQuery의 attr() 함수 활용

예, CSS 없이도 이 작업을 수행할 수 있습니다. jQuery의 attr() 메소드를 사용하면 이미지 소스 URL을 포함한 DOM 요소 속성을 수정할 수 있습니다.

예를 들어 이미지 태그에 "my_image"라는 id 속성이 있는 경우 다음 코드가 해당 작업을 수행합니다.

<img>

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

이 작업을 클릭에 연결하려면 이벤트:

$('#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);
    }
});

위 내용은 클릭 시 jQuery를 사용하여 이미지 소스를 어떻게 동적으로 변경할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!