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

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

다음과 같은 웹 구조 내에서:

<div>

사용자가 이미지의 소스를 imgx_off.gif로 업데이트해야 합니다. 여기서 x는 이미지를 나타냅니다.

jQuery가 이 작업을 처리할 수 있습니까, 아니면 CSS가 선호되는 방법입니까?

jQuery의 attr() 함수 사용

jQuery는 다음을 제공합니다. attr() 함수를 사용하여 속성 값을 수정할 수 있습니다. ID가 my_image인 이미지 소스를 변경하려면:

$('#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 중국어 웹사이트의 기타 관련 기사를 참조하세요!