문제) 아래 작은 이미지를 클릭시 상단의 큰 이미지와 텍스트 가격이 바뀌도록 jquery를 이용해 제작.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
li {
list-style: none;
display: inline-block;
text-align: center;
}
</style>
<script src="jquery-1.11.3.js"></script>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
$('li').click(function(e) {
var imgSrc = $(this).children('img').attr('src');
var price = $(this).children('.price').text();
$('#bigPic').attr('src', imgSrc);
$('#bigPrice').text(price);
});
});
function setImg(imgSrc) {
$('#bigPic').attr('src', imgSrc);
}
</script>
</head>
<body>
<p id="bigInfo">
<img width="300" height="300" src="img/selMsg.jpg" id="bigPic">
가격: <span id="bigPrice">15000</span>
<ul id="photoList">
<li><img src="product01.jpg"> <br />가격: <span
class="price">10000</span></li>
<li><img src="product02.jpg"> <br />가격: <span
class="price">12000</span></li>
<li><img src="product03.jpg"> <br />가격: <span
class="price">13000</span></li>
<li><img src="product04.jpg"> <br />가격: <span
class="price">15000</span></li>
</ul>
</body>
</html>
'jQuery' 카테고리의 다른 글
| JQuary로 Ajax 구현하기 (0) | 2016.03.21 |
|---|---|
| Ajax (Asynchronous JavaScript and XML) (0) | 2016.03.21 |
| jQuery Form API, 이벤트 메서드 (0) | 2016.02.19 |
| jQuery 속성 메서드: attr(), removeAttr(), val(), .text(), .html() (0) | 2016.02.19 |
| JQuery 기초, hasClass(), addClass(), removeClass(), toggleClass(), position(), width(), height() (0) | 2016.02.19 |
