js/shop.js 이벤트 변경문의
본문
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 파일의 소스를 어떻게 수정해야 하나요?
<div class="it_supply" id="it_supply_1">
<li value="1">선택</li>
<li class="aa_1" value="투명,1000,999,0">투명 + 1,000원</li>
<li class="aa_2" value="코끼리,1000,999,0">코끼리 + 2,000원</li>
</div>
참고로 아래처럼 하니 클릭이 되지를 않습니다.
$(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
.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);
}
});
하셔야 할듯 합니다
소중한 답변 감사드립니다.
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);
}
});
정안되시면 위 제이쿼리를 함수로 만드셔서 클릭하는 부분에 onclick 이벤트로 호출하세여.
왜 li로 바꾸셨는지 애매하네요. select 로하시고 스타일 조정하셔서 하는게 value 값 넘기기 쉬울텐데여
