-
12. JQuery 클릭하면 텍스트를 증가시키기 예시 - 1JQuery 2022. 9. 1. 09:12
원하는 기능 : div를 클릭 시 해당하는 칸의 숫자를 1씩 증가시킨다.
해결 방법 : 각각의 div를 this로 받고 find()를 통해 숫자를 증가시킬 div를 찾는다.
그 후 증가시킬 텍스트를 parseInt로 숫자로 변환시킨 뒤에 후위증가를 시킨 후 다시 text()에 넣어준다.
* div 클릭시 숫자를 증가시키는 예시
<!DOCTYPE html><head><meta charset="UTF-8"><title>문서 제목</title><style>div.item{width: 80%;height: 30px;border: 2px solid lightgray;margin-top: 5px;padding: 10px 0px 0px 10px;cursor: pointer;font-size: 13px;}
.item div{display: inline;}
div.cnt{border: 1px solid black;width: 20px;height: 20px;color: orange;font-weight: 600;float: right;text-align: center;margin-right: 10px;}</style></head><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>$(".item").click(function(){ //클래스 item을 클릭했을 때//this를 사용하여 해당 div에서 하위 태그 중 클래스가 cnt인 요소를 찾아 text를 가져온다//text이기 때문에 parseInt로 형변환을 한다.var count = parseInt($(this).find(".cnt").text());count++; //정수로 변환된 count를 1 후위증가 시킨다.$(this).find(".cnt").text(count); //this 하위의 클래스가 cnt인 요소의 text에 다시 count를 넣어준다.});</script></html>'JQuery' 카테고리의 다른 글
14. JQuery 생성된 요소에 클래스 추가/삭제 하기 (0) 2022.09.01 13. JQuery CSS 값 가져오기 & 변경하기 (0) 2022.09.01 11. JQuery 속성 변경하기 예시 - 1 (0) 2022.09.01 10. JQuery 속성 변경하기 (0) 2022.08.30 9. JQuery 속성 가져오기 (0) 2022.08.30