foreach 라디오버튼 순서? 선택이벤트? 질문드립니다.
본문
foreach($tmp as $key=>$val) $radio.="<input id='$val' type='radio' name='od_2' value='$val' onclick='select_option(); '><label for='$val'> $val </label>";
위 코드로 라디오박스를 생성했고, 라디오박스는 제품의 색상 선택으로 사용됩니다.
사이즈 별 가격표는 S,M,L,XL 이렇게 정해져있어서 벨류를 사용하여 style.display로 보이고 안보이고 설정 할 수 있지만, 색상은 제품마다 이름이 다 달라서 벨류를 어떻게 활용해야될지 고민입니다.
원하는 작동방식은 첫번째 라디오박스를 누르면 제품 이미지 첫번째 등록한게 나오게 하려고 하는데 if문으로 라디오박스 벨류로 확인해서 사용하기엔 제품색상이 각기 다 다르니까 방법을 모르겠네요..
답변 2
<style>
.wrap_img {
position: relative;
width: 5em;
height: 5em;
border: 1px dotted gray;
}
.wrap_img .product_img {
position: absolute;
width: 100%;
visibility: hidden;
}
</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(function () {
$('.wrap_radio input[name="od_2"]').each(function (idx) {
$(this).click(function () {
$('.wrap_img .product_img:nth-child(' + (idx + 1) + ')').css('visibility', 'visible');
});
$(this).blur(function () {
$('.wrap_img .product_img:nth-child(' + (idx + 1) + ')').css('visibility', 'hidden');
});
});
});
</script>
<div class="wrap_img">
<img src="https://sir.kr/img/common/dow/ico2-dw01.svg" class="product_img" title="01" />
<img src="https://sir.kr/img/common/dow/ico2-dw02.svg" class="product_img" title="02" />
<img src="https://sir.kr/img/common/dow/ico2-dw03.svg" class="product_img" title="03" />
<img src="https://sir.kr/img/common/dow/ico2-dw04.svg" class="product_img" title="04" />
<img src="https://sir.kr/img/common/dow/ico2-dw05.svg" class="product_img" title="05" />
<img src="https://sir.kr/img/common/dow/ico2-dw06.svg" class="product_img" title="06" />
<img src="https://sir.kr/img/common/dow/ico2-dw07.svg" class="product_img" title="07" />
<img src="https://sir.kr/img/common/dow/ico2-dw08.svg" class="product_img" title="08" />
<img src="https://sir.kr/img/common/dow/ico2-dw09.svg" class="product_img" title="09" />
<img src="https://sir.kr/img/common/dow/ico2-dw10.svg" class="product_img" title="10" />
<img src="https://sir.kr/img/common/dow/ico2-dw11.svg" class="product_img" title="11" />
<img src="https://sir.kr/img/common/dow/ico2-dw12.svg" class="product_img" title="12" />
<img src="https://sir.kr/img/common/dow/ico2-dw13.svg" class="product_img" title="13" />
<img src="https://sir.kr/img/common/dow/ico2-dw14.svg" class="product_img" title="14" />
<img src="https://sir.kr/img/common/dow/ico2-dw15.svg" class="product_img" title="15" />
<img src="https://sir.kr/img/common/dow/ico2-dw16.svg" class="product_img" title="16" />
<img src="https://sir.kr/img/common/dow/ico2-dw17.svg" class="product_img" title="17" />
<img src="https://sir.kr/img/common/dow/ico2-dw18.svg" class="product_img" title="18" />
<img src="https://sir.kr/img/common/dow/ico2-dw19.svg" class="product_img" title="19" />
<img src="https://sir.kr/img/common/dow/ico2-dw20.svg" class="product_img" title="20" />
<img src="https://sir.kr/img/common/dow/ico2-dw21.svg" class="product_img" title="21" />
<img src="https://sir.kr/img/common/dow/ico2-dw22.svg" class="product_img" title="22" />
<img src="https://sir.kr/img/common/dow/ico2-dw23.svg" class="product_img" title="23" />
<img src="https://sir.kr/img/common/dow/ico2-dw24.svg" class="product_img" title="24" />
</div>
<div class="wrap_radio">
<label><input id="01" type="radio" name="od_2" class="show_product_img" value="01" /> 01</label>
<label><input id="02" type="radio" name="od_2" class="show_product_img" value="02" /> 02</label>
<label><input id="03" type="radio" name="od_2" class="show_product_img" value="03" /> 03</label>
<label><input id="04" type="radio" name="od_2" class="show_product_img" value="04" /> 04</label>
<label><input id="05" type="radio" name="od_2" class="show_product_img" value="05" /> 05</label>
<label><input id="06" type="radio" name="od_2" class="show_product_img" value="06" /> 06</label>
<label><input id="07" type="radio" name="od_2" class="show_product_img" value="07" /> 07</label>
<label><input id="08" type="radio" name="od_2" class="show_product_img" value="08" /> 08</label>
<label><input id="09" type="radio" name="od_2" class="show_product_img" value="09" /> 09</label>
<label><input id="10" type="radio" name="od_2" class="show_product_img" value="10" /> 10</label>
<label><input id="11" type="radio" name="od_2" class="show_product_img" value="11" /> 11</label>
<label><input id="12" type="radio" name="od_2" class="show_product_img" value="12" /> 12</label>
<label><input id="13" type="radio" name="od_2" class="show_product_img" value="13" /> 13</label>
<label><input id="14" type="radio" name="od_2" class="show_product_img" value="14" /> 14</label>
<label><input id="15" type="radio" name="od_2" class="show_product_img" value="15" /> 15</label>
<label><input id="16" type="radio" name="od_2" class="show_product_img" value="16" /> 16</label>
<label><input id="17" type="radio" name="od_2" class="show_product_img" value="17" /> 17</label>
<label><input id="18" type="radio" name="od_2" class="show_product_img" value="18" /> 18</label>
<label><input id="19" type="radio" name="od_2" class="show_product_img" value="19" /> 19</label>
<label><input id="20" type="radio" name="od_2" class="show_product_img" value="20" /> 20</label>
<label><input id="21" type="radio" name="od_2" class="show_product_img" value="21" /> 21</label>
<label><input id="22" type="radio" name="od_2" class="show_product_img" value="22" /> 22</label>
<label><input id="23" type="radio" name="od_2" class="show_product_img" value="23" /> 23</label>
<label><input id="24" type="radio" name="od_2" class="show_product_img" value="24" /> 24</label>
</div>
배르만님 답변을 참고하여 다른 방법으로 해결하였습니다! 정말 감사합니다!
document.getElementById('phimg').src = g5_url + '/data/item/' + imgvalue;
이런식으로 해결하였습니다!
원하는 작동방식은 첫번째 라디오박스를 누르면 제품 이미지 첫번째 등록한게 나오게 하려고 하는데 ......
==
value나 data-img 같은 사용자 지정 속성에
image src에 해당하는 값을 지정하고
click event handler에서 이 값을 사용하시면 됩니다.
답변을 작성하시기 전에 로그인 해주세요.
