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

2019. 04. 11. 08:45

여러개의 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개의 답변이 있습니다.

질문자 채택 답변

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

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

});

});

2019. 04. 11. 09:48
49