previousElementSibling
previousSibling 사용하기
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(function(){
// $(document).on("click", ".btn_inc", increase);
// $(document).on("click", ".btn_dec", decrease);
// 문서를 실행했을때 .btn_inc가 실행되면 incease 함수 동작
$('#orderList').on('click', qtyChange);
});
function qtyChange(e){
// alert(e.target.previousElementSibling.previousElementSibling.name);
if(e.target.value=='빼기'){
decrease(e);
}else if(e.target.value=='추가'){
increase(e);
}
}
function increase (e){
const qty_value1 = $(e.target.previousElementSibling)
qty_value1.val(parseInt(qty_value1.val())+1)
}
function decrease (e){
const qty_value = $(e.target.previousElementSibling.previousElementSibling)
if(qty_value.val() == 0){
alert('뺄 수 없어요.');
}else{
qty_value.val(parseInt(qty_value.val())-1)
}
}
function addOrder(){
const order = $("input[name='order']").val();
$('#orderList > ol').append(
"<li>"
+order
+" "
+"<input type='text' size='3' value='1' name='txt_qty'>"
//추가 기준 e.target.previousElementSibling
//빼기 기준 e.target.previousElementSibling.previousElementSibling
+"<input type='button' class='btn_inc' value='추가'>"
+"<input type='button' class='btn_dec' value='빼기'>"
+"</li>"
);
}
</script>
</head>
<body>
<div>
<input type="text" name="order">
<button onclick="addOrder()">주문추가</button>
</div>
<hr>
<div id="orderList">
<ol>
</ol>
</div>
</body>
화이탱!