코딩도전기/J-Query
J-Query_TEST
by 코도꼬마
2023. 2. 14.
sample 1
- ID 박스에 admin을 입력하고 확인을 누른 후 링크를 누르면 'gdu.co.kr'로 이동
- 다른 값을 입력하면 'google.co.kr'로 이동
<body>
<p>
ID : <input type="text" id="userId"/>
<button id="goLink">확인</button>
</p>
<a href="#">링크이동</a>
</body>
<script>
//1.goLink 클릭하면
$('#goLink').click(function(){
//2.userId의 value를 가져온다
var val = $('#userId').val();
//3.가져온 값이 admin인지 판별
//4.여부에 따라 a 태그의 href 속성값이 변경
if(val == 'admin'){
$('a').attr('href','https://www.google.com/');
}else{
$('a').attr('href','https://www.gdu.co.kr/');
}
});
</script>
sample 2
- div 영역을 클릭할 때 마다 해당하는 div 영역을 클릭한 횟수를 자식 div에 표시
<body>
<div class="item">
<div>A 아이템 구매 수</div>
<div class="cnt">0</div>
</div>
<div class="item">
<div>B 아이템 구매 수</div>
<div class="cnt">0</div>
</div>
<div class="item">
<div>C 아이템 구매 수</div>
<div class="cnt">0</div>
</div>
</body>
<script>
//div 영역을 클릭할 때 마다 해당하는 div 영역을 클릭한 횟수를 자식 div에 표시해주는 코드입니다.
//1.div.item 클릭
$('div.item').click(function(){
// div.item 자식 중 클래스가 ctn인 div의 문자열을 가져와서 정수로 변환하여 cnt라는 변수에 저장해줍니다.
//2.div.cnt의 태그사이 값 가져오기
var cnt = parseInt($(this).find('div.cnt').text());
//3.가져온 값 증가하기
//클릭 수를 저장하기 위해서 div가 클릭될 때 마다 cnt의 값을 증가시켜주고
cnt++;
//console.log(cnt);
//4.증가한 값 div.cnt에 적용하기
//증가된 값을 다시 div.item 자식 중 클래스가 ctn인 div의 문자열에 넣어줍니다.
$(this).find('div.cnt').text(cnt);
});
</script>
