이전에 선택했던 요소도 함께 값이 변경되는 문제를어떻게 해결해야 할까요?

Question

여러개의 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); }); });

Answer 1

소스가 살짝 누락이 된것같습니다.

num_modal 클래스가 일단 없네요 본 소스에는 있으실것으로 우선 추정하겠습니다.

$('li .modal_open').click(function(){

$('.modal_bg').css('display','block');

$('.content_area').css('display','block');

var pp = $(this).prev('span').find('input');

// 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');

pp.val(num);

});

});

아래와 같이 하시면 될것같습니다.

$('li .modal_open').click(function(){

var pp = $(this).prev('span');

var cla = pp.find('input');

var index = $(this).parent().parent().index();

$('.ff').eq(index).val(99)

})

해당하는 li가 몇번째 li인지 부모를 타고 올라가여 해당 index를 저장하였다가
ff class의 동일한 val를 변경하면됩니다.

혹시 이해가 안가시면 덧글 주세요 다시 자세하게 설명 드리겠습니다 ^^

그럼 이걸 합쳐서 코드로 만들면 아래와 같이되겠네요.

$('li .modal_open').click(function(){

$('.modal_bg').css('display','block');

$('.content_area').css('display','block');

var pp = $(this).prev('span').find('input');

var index = $(this).parent().parent().index();

// 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');

$('.ff').eq(index).val(num)

//pp.val(num);

});

});