jquery를 클릭하여 사진을 변경하는 방법-프런트엔드 Q&A-php.cn

jquery를 클릭하여 사진을 변경하는 방법

青灯夜游

풀어 주다： 2022-04-21 15:02:30

원래의

6246명이 탐색했습니다.

구현 방법: 1. click()을 사용하여 클릭 이벤트를 버튼 요소에 바인딩하고 구문은 "button element.click(function(){});"입니다. , attr( )을 사용하여 이미지 주소를 수정합니다. 구문은 "$("img").attr("src","new image address")"입니다.

jquery를 클릭하여 사진을 변경하는 방법

이 튜토리얼의 운영 환경: windows7 시스템, jquery1.10.2 버전, Dell G3 컴퓨터.

그림을 변경하려면 클릭을 구현하는 jquery 메서드:

구현 아이디어:

click()을 사용하여 클릭 이벤트를 버튼 요소에 바인딩하고 이벤트 처리 기능을 설정합니다.
처리 함수에서 attr()을 사용하여 이미지 주소를 수정합니다(즉, img 요소의 src 속성 값을 수정합니다)

구현 코드: 이미지를 변경하려면 버튼을 클릭하세요

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script src="js/jquery-1.10.2.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				$("button").click(function() {
					$("img").attr("src","img/1.jpg");
				});
			});
		</script>
	</head>

	<body>
		<img  src="img/3.jpg"    style="max-width:90%" / alt="jquery를 클릭하여 사진을 변경하는 방법" ><br><br>
		<button>点击按钮，更换图片</button>
	</body>
</html>

로그인 후 복사

jquery를 클릭하여 사진을 변경하는 방법