새로 선택한 요소 이전에 선택했던 요소도 함께 값이 변경되는 문제 어떻게 해결해야 할까요?
조회수 644회
여러개의 li 안의 버튼을 클릭하면 팝업창이 나오고 팝업창 안 input의 val 값을 변경하면 그 값 만큼 li 속 버튼의 이전 요소인 input 의 값이 변경되도록 하였습니다. 그 후 다른 li 요소의 버튼을 누르면 위의 루트대로 똑같이 값은 변경이 되는데 이전에 선택했던 li 의 input값까지 함께 변경이 됩니다 각자 따로따로 변경이 되게 만들고싶은데 어떻게해야 할까요? ㅜㅜ
<li class="">
<input type="checkbox ">
<label>
<span><input type="text" value = "1" class="ff">개</i></span>
<img class="modal_open">
</label>
</li>
<li class="">
<input type="checkbox ">
<label>
<span><input type="text" value = "1" class="ff">개</i></span>
<img class="modal_open">
</label>
</li>
$('li .modal_open').click(function(){
$('.modal_bg').css('display','block');
$('.content_area').css('display','block');
var pp = $(this).prev('span');
var cla = pp.find('input');
$('.btn').click(function(){
var num = $('#num_modal').val();
$('.modal_bg').css('display','none');
$('.content_area').css('display','none');
cla.val(num);
});
});
-
(•́ ✖ •̀)
알 수 없는 사용자
1 답변
-
셀렉팅의 문제라기 보다는
클릭 이벤트 안에서 이벤트 해제 없이 또 다른 클릭 이벤트를 걸어서 그럴거에요.
매 번 클릭 할 때마다 클릭 이벤트가 새로 걸릴꺼니...
아마도 첫번째든 두번째든 먼저 클릭했을때는 안 바뀌겠지만 그 다음부터는 동일한 값으로 계속 변화될거 같네요.
모달 마크업이 보이지 않아서 추측밖에 못하겠지만 일단 동작하는대로 대충 고쳐보면
아래와 같이 밖으로 이벤트를 빼야 되지 않을까요?
var cla = null; $('li .modal_open').click(function(){ $('.modal_bg').css('display','block'); $('.content_area').css('display','block'); var pp = $(this).prev('span'); cla = pp.find('input'); }); $('.btn').click(function(){ var num = $('#num_modal').val(); $('.modal_bg').css('display','none'); $('.content_area').css('display','none'); if (cla) { cla.val(num); } });아니면 아래도 될거 같긴 한데 ㅋㅋ;
$('li .modal_open').click(function(){ $('.modal_bg').css('display','block'); $('.content_area').css('display','block'); var pp = $(this).prev('span'); var cla = pp.find('input'); $('.btn').click(function(){ var num = $('#num_modal').val(); $('.modal_bg').css('display','none'); $('.content_area').css('display','none'); cla.val(num); $('.btn').off('click'); }); });두 방법 다 뭔가 어설프긴 하네요.
댓글 입력