<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<h1>이미지 자동 삽입</h1>
<script type="text/javascript">
for(i=1; i<10; i++){
$("body").append("<img src='./image/photo_"+ i +".jpg'>");
}
</script>
</body>
</html>실행결과
이미지가 자동으로 삽입되었다.
이미지명이 photo_01~photo_09까지 있어서 for문을 이용.
삽입된 이미지를 클릭하면 삭제
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<h1>이미지 클릭 시 삭제</h1>
<script type="text/javascript">
for(i=1; i<10; i++){
$("body").append("<img src='./image/photo_"+ i +".jpg'>");
}
$(document).ready(function () {
$("img").click(function () {
$(this).attr('src',"");
})
});
</script>
</body>
</html>
실행결과
삽입 된 이미지를 클릭하면 삭제가 된다.
$(this).attr('src',"");$(this).remove("");둘 다 사용 가능하다.
'IT > JSP + JQuery' 카테고리의 다른 글
| [JSP] 지시문 (0) | 2021.06.14 |
|---|---|
| [JSP] 정의, 특징, 구성요소 (2) | 2021.06.14 |
| [JQuery] 속성 값 지정 -2 ( 이미지를 클릭하면 속성 값 취득하여 출력) (0) | 2021.06.10 |
| [JQuery] 속성 값 지정 - 1 ( 이미지 클릭하면 다른 이미지로 변경) (0) | 2021.06.10 |
| [JQuery] 필기 (0) | 2021.06.10 |
