요소의 생성 및 삽입 append사용, removeAttr 사용 예시
<!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>
<h2>이미지 자동 삽입</h2>
<p>클릭시 이미지 삭제됩니다.</p>
<script type="text/javascript">
$(document).ready(function() {
for(i=1; i<=9; i++){ //.attr().attr()연달아 사용할 수 있다.
let img = $("<img>").attr({'src': './image/photo_'+i+'.jpg',
"class":"photo"});
$("body").append(img);
}
$('.photo').click(function() {
$(this).removeAttr("src");
})
});
</script>
</body>
</html>
설명
우선 이미지명이 photo_1~9까지의 이미지가 9개가 있다고 가정한다.
연속되는 이미지 명이기 때문에 for문을 사용하여 img tag에 scr값과 class를 추가하여 body tag 밑에 생성한다.
클릭 시 removeAttr()함수를 사용하여 scr를 삭제한다.
removeAttr() : 선택된 요소의 속성을 삭제한다.
'IT > JavaScript' 카테고리의 다른 글
| [jQuery] 여러가지 함수 사용 예제 (0) | 2021.06.11 |
|---|---|
| [jQuery] td elemant에 문자열을 치환하도록 하라./이름을 마우스 클릭하면 alert창에 이름이 출력되도록 하라 (0) | 2021.06.11 |
| [jQuery] 속성 값에 사진의 제목을 설정하고 이미지를 클릭하면 속성 값을 취득하여 출력하기 / 사용자 지정 태그 사용예시 (0) | 2021.06.11 |
| [jQuery] 이미지를 클릭 시 이미지 변경 예시 / hover함수 사용예시 (1) | 2021.06.11 |
| [jQuery] mouseover, mouseout, css 사용예시 / attr, addClass, removeClass사용예시 (0) | 2021.06.11 |