jquery 질문 드립니다.
본문
<li id="price1">10,000</li>
<li id="price2">20,000</li>
<span id="total"></span>
위와 같이 박스를 두개 만들고 클릭시 toggleClass("on") 을 줘서 선택되었음을 색상변화로 알려주고 있습니다.
id=price1 에 class="on" 일 경우 id="total" 부분에 10,000 이 표시되고
추가로 id=price2 가 on 일 경우 + 20,000이 되어 총 30,000이 나오게 하고싶습니다.
물론 price1 이나 2를 다시 클릭해서 class="on" 이 사라지면 id=total 값도 같이 변경이 되게 하고싶습니다.
구글링을 해보고는 있으나 제대로 동작을 안하네요 ㅠ 도움부탁드립니다.
답변 2
다음 코드가 도움이 될지 모르겠습니다.
<style>
.test {
width: 20%;
background-color: #ddd;
}
.test ul {
list-style-type: none;
padding: 0;
margin: 0;
}
.test li {
border: 1px solid #000;
cursor: pointer;
margin: 0.2em 0;
}
.test li.on {
background-color: orange;
}
#total {
display: block;
text-align: right;
height: 1.2em;
}
</style>
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(function () {
$('.test li').on('click', function () {
let num = 0;
$(this).toggleClass('on');
$(this).parent().children('.on').each(function () {
let val = $(this).text().replace(/,/g, '');
num += Number(val);
});
$('#total').text(num.toLocaleString());
});
});
</script>
<div class="test">
<ul>
<li id="price1">10,000</li>
<li id="price2">20,000</li>
</ul>
<span id="total">0</span>
</div>
제가 설명드리는게 답이 될 수있을지 없을지는 몰라도 비슷한 문제 해결에는 도움이 되지 않을까 해서 답글로 작성해봅니다. 이제 개발도 취미로 해보는 입장이지만요. 사용자의 요구사항 정의를 실제 구현할때 혹은 본인이 원하는 기능을 제작하고자 할때 좋은 참고가 되었으면 하는 바램입니다.
클릭시 toggleClass("on") 을 줘서 선택되었음을 색상변화로 알려주고 있다 => 이 부분은
클릭시 이벤트입니다. 이벤트는 화면상 보여지든 보여지지 않든 발생하게 됩니다. 그렇게 정했다면 발생하게됩니다. 따라서 on 클래스로 지정된 css style을 변하게 하고 싶다. => 이 부분은 무조건 반영되어야 한다.로 정해야 합니다.
그다음 조건문이 출현합니다.
id=price1 에 class="on" 일 경우 id="total" 부분에 10,000 이 표시되고 id=price2 가 on 일 경우 + 20,000이 되어 총 30,000이 나오게 하고싶다 => 조건문 부분입니다.
price1일때 10,000을 표시해야 된다면 html 구조상 해당요소의 text 값을 받아오면 됩니다.
마찬가지로 price2일 경우 20,000을 표시해야하는 경우 해당 요소의 text값을 받아오면 되겠죠.
그리고 그 다음 출현하는 부분이 합산입니다.
합산의 경우 예외(class="on"이 사라지면 = 적용안되면)가 있네요.
그러면 합산의 조건은 간단해집니다.
class="on"인 경우만 계산하면 되니까요.
전체 로직을 살펴보면 이벤트 처리는 클릭과 합산처리 부분으로 나눠지고
이벤트 처리부분은 색상 변화와 값변화 그리고 값변화에 따른 합산처리 변화입니다.
색상변화는 클래스 상태값을 바꾸고, 값이 변화되는 부분을 합산 처리변화 로직에 할당하게 하면 스크립트 처리는 간단해집니다.
<script>
$(document).ready(function() {
$(document).on('click', 'li[id^="price"]', function() {
$(this).toggleClass('on');
updateTotal();
});
// 총합 계산 함수
function updateTotal() {
let total = 0;
// 'on' 클래스가 적용된 요소들의 데이터 속성 값 합산
$('li.on').each(function() {
total += parseInt($(this).data('price'));
});
});
</script>
<style>
.on {
background-color: red; font-weight: bold; }
</style>
