foreach 라디오버튼 순서? 선택이벤트? 질문드립니다. 채택완료
개초발보
2년 전
조회 1,282
foreach($tmp as $key=>$val) $radio.="";
위 코드로 라디오박스를 생성했고, 라디오박스는 제품의 색상 선택으로 사용됩니다.
사이즈 별 가격표는 S,M,L,XL 이렇게 정해져있어서 벨류를 사용하여 style.display로 보이고 안보이고 설정 할 수 있지만, 색상은 제품마다 이름이 다 달라서 벨류를 어떻게 활용해야될지 고민입니다.
원하는 작동방식은 첫번째 라디오박스를 누르면 제품 이미지 첫번째 등록한게 나오게 하려고 하는데 if문으로 라디오박스 벨류로 확인해서 사용하기엔 제품색상이 각기 다 다르니까 방법을 모르겠네요..
댓글을 작성하려면 로그인이 필요합니다.
답변 2개
채택된 답변
+20 포인트
2년 전
</p>
<p><style>
.wrap_img {
position: relative;
width: 5em;
height: 5em;
border: 1px dotted gray;
}
.wrap_img .product_img {
position: absolute;
width: 100%;
visibility: hidden;
}
</style></p>
<p><script src="<a href="http://code.jquery.com/jquery-latest.min.js"></script>" target="_blank" rel="noopener noreferrer">http://code.jquery.com/jquery-latest.min.js"></script></a>
<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></p>
<p><div class="wrap_img">
<img src="<a href="https://sir.kr/img/common/dow/ico2-dw01.svg"" target="_blank" rel="noopener noreferrer">https://sir.kr/img/common/dow/ico2-dw01.svg"</a> class="product_img" title="01" />
<img src="<a href="https://sir.kr/img/common/dow/ico2-dw02.svg"" target="_blank" rel="noopener noreferrer">https://sir.kr/img/common/dow/ico2-dw02.svg"</a> class="product_img" title="02" />
<img src="<a href="https://sir.kr/img/common/dow/ico2-dw03.svg"" target="_blank" rel="noopener noreferrer">https://sir.kr/img/common/dow/ico2-dw03.svg"</a> class="product_img" title="03" />
<img src="<a href="https://sir.kr/img/common/dow/ico2-dw04.svg"" target="_blank" rel="noopener noreferrer">https://sir.kr/img/common/dow/ico2-dw04.svg"</a> class="product_img" title="04" />
<img src="<a href="https://sir.kr/img/common/dow/ico2-dw05.svg"" target="_blank" rel="noopener noreferrer">https://sir.kr/img/common/dow/ico2-dw05.svg"</a> class="product_img" title="05" />
<img src="<a href="https://sir.kr/img/common/dow/ico2-dw06.svg"" target="_blank" rel="noopener noreferrer">https://sir.kr/img/common/dow/ico2-dw06.svg"</a> class="product_img" title="06" />
<img src="<a href="https://sir.kr/img/common/dow/ico2-dw07.svg"" target="_blank" rel="noopener noreferrer">https://sir.kr/img/common/dow/ico2-dw07.svg"</a> class="product_img" title="07" />
<img src="<a href="https://sir.kr/img/common/dow/ico2-dw08.svg"" target="_blank" rel="noopener noreferrer">https://sir.kr/img/common/dow/ico2-dw08.svg"</a> class="product_img" title="08" />
<img src="<a href="https://sir.kr/img/common/dow/ico2-dw09.svg"" target="_blank" rel="noopener noreferrer">https://sir.kr/img/common/dow/ico2-dw09.svg"</a> class="product_img" title="09" />
<img src="<a href="https://sir.kr/img/common/dow/ico2-dw10.svg"" target="_blank" rel="noopener noreferrer">https://sir.kr/img/common/dow/ico2-dw10.svg"</a> class="product_img" title="10" />
<img src="<a href="https://sir.kr/img/common/dow/ico2-dw11.svg"" target="_blank" rel="noopener noreferrer">https://sir.kr/img/common/dow/ico2-dw11.svg"</a> class="product_img" title="11" />
<img src="<a href="https://sir.kr/img/common/dow/ico2-dw12.svg"" target="_blank" rel="noopener noreferrer">https://sir.kr/img/common/dow/ico2-dw12.svg"</a> class="product_img" title="12" />
<img src="<a href="https://sir.kr/img/common/dow/ico2-dw13.svg"" target="_blank" rel="noopener noreferrer">https://sir.kr/img/common/dow/ico2-dw13.svg"</a> class="product_img" title="13" />
<img src="<a href="https://sir.kr/img/common/dow/ico2-dw14.svg"" target="_blank" rel="noopener noreferrer">https://sir.kr/img/common/dow/ico2-dw14.svg"</a> class="product_img" title="14" />
<img src="<a href="https://sir.kr/img/common/dow/ico2-dw15.svg"" target="_blank" rel="noopener noreferrer">https://sir.kr/img/common/dow/ico2-dw15.svg"</a> class="product_img" title="15" />
<img src="<a href="https://sir.kr/img/common/dow/ico2-dw16.svg"" target="_blank" rel="noopener noreferrer">https://sir.kr/img/common/dow/ico2-dw16.svg"</a> class="product_img" title="16" />
<img src="<a href="https://sir.kr/img/common/dow/ico2-dw17.svg"" target="_blank" rel="noopener noreferrer">https://sir.kr/img/common/dow/ico2-dw17.svg"</a> class="product_img" title="17" />
<img src="<a href="https://sir.kr/img/common/dow/ico2-dw18.svg"" target="_blank" rel="noopener noreferrer">https://sir.kr/img/common/dow/ico2-dw18.svg"</a> class="product_img" title="18" />
<img src="<a href="https://sir.kr/img/common/dow/ico2-dw19.svg"" target="_blank" rel="noopener noreferrer">https://sir.kr/img/common/dow/ico2-dw19.svg"</a> class="product_img" title="19" />
<img src="<a href="https://sir.kr/img/common/dow/ico2-dw20.svg"" target="_blank" rel="noopener noreferrer">https://sir.kr/img/common/dow/ico2-dw20.svg"</a> class="product_img" title="20" />
<img src="<a href="https://sir.kr/img/common/dow/ico2-dw21.svg"" target="_blank" rel="noopener noreferrer">https://sir.kr/img/common/dow/ico2-dw21.svg"</a> class="product_img" title="21" />
<img src="<a href="https://sir.kr/img/common/dow/ico2-dw22.svg"" target="_blank" rel="noopener noreferrer">https://sir.kr/img/common/dow/ico2-dw22.svg"</a> class="product_img" title="22" />
<img src="<a href="https://sir.kr/img/common/dow/ico2-dw23.svg"" target="_blank" rel="noopener noreferrer">https://sir.kr/img/common/dow/ico2-dw23.svg"</a> class="product_img" title="23" />
<img src="<a href="https://sir.kr/img/common/dow/ico2-dw24.svg"" target="_blank" rel="noopener noreferrer">https://sir.kr/img/common/dow/ico2-dw24.svg"</a> class="product_img" title="24" />
</div></p>
<p><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></p>
<p>
로그인 후 평가할 수 있습니다
답변에 대한 댓글 1개
�
개초발보
2년 전
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
document.getElementById('phimg').src = g5_url + '/data/item/' + imgvalue;
이런식으로 해결하였습니다!