이전에 올렸던 input 값 증가 질문입니다
본문
<table>
<thead>
<tr>
<th>품명</th>
<th>가격</th>
<th>단위</th>
<th>수량</th>
</tr>
</thead>
<tbody>
<tr>
<td>상황버섯</td>
<td>25000</td>
<td>200g</td>
<td style="position:relative;">
<input type="text" name="wr_12" class="count" value="0">
<p class="down">-</p>
<p class="up">+</p>
</td>
</tr>
<tr>
<td>생굼벵이</td>
<td>50000</td>
<td>1kg</td>
<td style="position:relative;">
<input type="text" name="wr_13" class="count" value="0">
<p class="down">-</p>
<p class="up">+</p>
</td>
</tr>
<tr>
<td>건조굼벵이</td>
<td>80000</td>
<td>200g</td>
<td style="position:relative;">
<input type="text" name="wr_14" class="count" value="0">
<p class="down">-</p>
<p class="up">+</p>
</td>
</tr>
<tr>
<td>유산균 굼벵이환</td>
<td>120000</td>
<td>200g</td>
<td style="position:relative;">
<input type="text" name="wr_15" class="count" value="0">
<p class="down">-</p>
<p class="up">+</p>
</td>
</tr>
<tr>
<td>유산균 굼벵이분말</td>
<td>120000</td>
<td>200g</td>
<td style="position:relative;">
<input type="text" name="wr_16" class="count" value="0">
<p class="down">-</p>
<p class="up">+</p>
</td>
</tr>
<tr>
<td>홍굼보</td>
<td>35000</td>
<td>3.75g*10환</td>
<td style="position:relative;">
<input type="text" name="wr_17" class="count" value="0">
<p class="down">-</p>
<p class="up">+</p>
</td>
</tr>
<tr>
<td>꽃벵이과립</td>
<td>150000</td>
<td>120g*60포</td>
<td style="position:relative;">
<input type="text" name="wr_18" class="count" value="0">
<p class="down">-</p>
<p class="up">+</p>
</td>
</tr>
<tr>
<td>꽃벵이 젤리스틱</td>
<td>150000</td>
<td>20g*60포</td>
<td style="position:relative;">
<input type="text" name="wr_19" class="count" value="0">
<p class="down">-</p>
<p class="up">+</p>
</td>
</tr>
<tr>
<td>진하게달인 꽃벵이</td>
<td>190000</td>
<td>80ml*80포</td>
<td style="position:relative;">
<input type="text" name="wr_20" class="count" value="0">
<p class="down">-</p>
<p class="up">+</p>
</td>
</tr>
<tr>
<td>[애견간식]냠굼냠굼</td>
<td>9000</td>
<td>150g</td>
<td style="position:relative;">
<input type="text" name="wr_21" class="count" value="0">
<p class="down">-</p>
<p class="up">+</p>
</td>
</tr>
</tbody>
</table>
</dd>
</dl>
<dl class="result_tag">
<dt>
<strong style="color:#f87b1f;">v</strong> 주문금액
</dt>
<dd style="line-height:2.8;">
<input type="hidden" class="sell_price"/>
<input type="text" value="0" class="result" readonly>원
</dd>
</dl>
<script>
$(upBtn).click(function(){
let num = $(this).siblings('input').val();
num = $(this).siblings('input').val(num*1+1);
});
$(downBtn).click(function(){
let num = $(this).siblings('input').val();
num = $(this).siblings('input').val(num*1-1);
});
$(".up, .down").on("click", function(){
let sum = 0;
$(".count").each(function(){
sum += parseInt($(this).val());
});
$(".result").val(sum);
});
});
</script>
몇시간전에 올렸던 질문인데 input을 each로 탐색해서 결과창 input에 값을 넘어오게 했습니다.
해결될 문제가 하나 남았는데
<tr>
<td>꽃벵이과립</td>
<td>150000</td>
<td>120g*60포</td>
<td style="position:relative;">
<input type="text" name="wr_18" class="count" value="0">
<p class="down">-</p>
<p class="up">+</p>
</td>
</tr>
이 코드가 여러개 있는데 카운트 1증가 혹은1감소 했을때 150000이라는 가격이 결과값으로 넘어가면 좋겠습니다.ㅠㅠ
input value 값은 현재 0 으로 해놨는데
input hidden 으로 value 값을 시험삼아서 150000으로 넣고 증가,감소시키면
카운트input창에는 150001 , 149999 이런식으로 나오고 결과창에도 이숫자 그대로 담기는데
저는 카운트 input에는 카운트만 담기게 하고 결과에는 계산값을 담고싶습니다..
여러개를 해봤지만 도통 생각이 나질 않아서 도움좀 받고싶습니다 ㅠㅠ
답변 2
value 말고 amount 라는 attribute 를 하나 더 만들어서 따로 계산하면 되지 않나요?
getAttribute('amount') 하면 해당 attrubute 값을 가져 올수 있으니까요
알듯말듯한데 제가 초심자라서 attr을써서 예시로 25000이라는 가격을 변수에 담아서
결과값 value 에 변수를 넣었더니 당연히 25000만 찍혀서.. 계산을 어떻게 해줘야할지 모르겠습니다 ㅠㅠ each는 전체를 가져오고있어서 +나 - 버튼 아무거나 눌러도 25000이 나옵니다 ㅠㅠ
코드상에 보면
parseInt($(this).val());
이부분이 value 값을 가져오게 되는것처럼
<input type="text" name="wr_20" class="count" value="0" amout="15000">
한다음에
parseInt($(this).attr('amout'));
하면 해당 amount 값을 가져옵니다.
그걸로 별도 변수 만들어서 따로 계산하시라는 뜻입니다. ^^
amout 이라는 attribute도 있군요.. 정말 많이 배우네요 친절한 답변 감사합니다..ㅠㅠ
한번 해보겠습니다.!! ㅠㅠ
저 정말 여러번 질문하게 되는데..
마지막에 쓴 attr 이 9000인데 계산은 되지만 마지막 것만 불러오고 다른값은 무시되고 어느 input 이든 9000을 불러오게 되는데 이부분은 each로 attr을 불러와야하나요?
이미 해결하셨으니 사족이겠지만
amount 라는 속성이 있는게 아니라 님이 만들어서 쓸수 있다는 뜻입니다.
정확한건 돌려봐야 알겠지만 공부하는데 도움이 되셨으면 합니다.
돌려보다 깨달았습니다 ㅎㅎ 속성을 직접 생성해서 쓸 수 있더군요 .
공부가 정말 많이 되었습니다 !! 감사합니다
$(".up, .down").on("click", function() {
let sum = 0, price = 0;
$(".count").each(function() {
price = parseInt($(this).closest("tr").find("td:eq(1)").text());
sum += parseInt($(this).val()) * price;
});
$(".result").val(sum);
});
많은 고수님들이 시간내주시네요.. ㅠㅠㅠ 계란님 해결했습니다 . td의 텍스트 값을 가져오는 방법은 정말 생각치도 못했는데.. 감사합니다 ㅠㅠㅠ