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

조회수 116회

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

    두 방법 다 뭔가 어설프긴 하네요.

답변을 하려면 로그인이 필요합니다.

Hashcode는 개발자들을 위한 무료 QnA 사이트입니다. 계정을 생성하셔야만 답변을 작성하실 수 있습니다.

(ಠ_ಠ)
(ಠ‿ಠ)

ᕕ( ᐛ )ᕗ
로그인이 필요합니다

Hashcode는 개발자들을 위한 무료 QnA사이트 입니다. 계정을 생성하셔야만 글을 작성하실 수 있습니다.