테스트 사이트 - 개발 중인 베타 버전입니다

js/shop.js 이벤트 변경문의 채택완료

감성콘텐츠 7년 전 조회 4,417

js/shop.js 파일의 158줄 소스를 보면

셀렉트박스 선택이 변경될때마다 함수를 실행하도록 되어있습니다.

$(document).on("change", "select.it_supply", function() {         var $el = $(this);         var val = $(this).val();

        if(val == "")             return;

        if(supply_add)             sel_supply_process($el, true);     });

 

이것을 셀렉트박스가 아닌 별도로 추가한 li 태그를 클릭했을때 함수가 실행되도록

변경하고자 하는데요. 

만약 아래처럼  li 태그를 구성하였을 경우 클릭을 통해 이벤트가 실행되도록 하려면

js/shop.js 파일의 소스를 어떻게 수정해야 하나요?

 

 
  • 선택
  •  
  • 투명 + 1,000원
  •    
  • 코끼리 + 2,000원
  •  

    참고로 아래처럼 하니 클릭이 되지를 않습니다.

    $(document).on("click", ".it_supply", function() {

            var $el = $(this);         var val = $(this).val();

            if(val == "")             return;

            if(supply_add)             sel_supply_process($el, true);     });

    댓글을 작성하려면 로그인이 필요합니다.

    답변 2개

    7년 전

    정안되시면 위 제이쿼리를 함수로 만드셔서 클릭하는 부분에 onclick 이벤트로 호출하세여.

    왜 li로 바꾸셨는지 애매하네요. select 로하시고 스타일 조정하셔서 하는게 value 값 넘기기 쉬울텐데여

    로그인 후 평가할 수 있습니다

    댓글을 작성하려면 로그인이 필요합니다.

    o
    7년 전

    .it_supply-->#it_supply_1 li

    var val = $(this).val(); --->var val = $(this).attr("value");

     

    $(document).on("click", "#it_supply_1 li", function() {

            var $el = $(this);         var val = $(this).attr("value");

            if(val == "")             return;

            if(supply_add)             sel_supply_process($el, true);     });

     

     

    이렇게 하셔도  sel_supply_process($el, true); 가 실행이 되지 않습니다   $el   이 셀렉트 태그 여야 하기 때문입니다 

    보통  select.it_supply 를  style 을써서 style="display:none" 나 visible:hiddenp   으로 처리하신 다음에 

    $(document).on("click", "#it_supply_1 li", function() {

        var $el = $(this);     var val = $(this).attr("value");

        if(val == "")         return;

        //선택된 값이 있다면-> 숨긴  select 박스를 선택하게한다      if( jQuery("select.it_supply option[value='"+val+"']").length){         jQuery("select.it_supply option[value='"+val+"']").prop("selected", true);      } });

     

    하셔야 할듯 합니다

     

    로그인 후 평가할 수 있습니다

    답변에 대한 댓글 1개

    감성콘텐츠
    7년 전
    소중한 답변 감사드립니다.

    js/shop.js 파일의 158줄 소스를 말씀해주신대로 변경하고
    skin/shop/basic/style.css 파일에 .sit_option select.it_supply{visibility:hidden;}
    를 추가해서 select.it_supply 숨김처리까지 하였는데요.
    li 태그를 클릭해도 아무런 반응이 없네요ㅠ

    혹시 아래소스에서 sel_supply_process($el, true); 을 추가해야 되지 않을까요?

    $(document).on("click", "#it_supply_1 li", function() {
    var $el = $(this);
    var val = $(this).attr("value");

    if(val == "")
    return;

    //선택된 값이 있다면-> 숨긴 select 박스를 선택하게한다
    if( jQuery("select.it_supply option[value='"+val+"']").length){
    jQuery("select.it_supply option[value='"+val+"']").prop("selected", true);
    }
    });

    댓글을 작성하려면 로그인이 필요합니다.

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

    로그인