제이쿼리 for문 안에서 라디오 클릭 이벤트 문의입니다.
본문
<?php for($i=1;$i<=10;$i++) {?>
<div>
<input type="radio" id="test<?php echo $i ?>_1" name="test<?php echo $i ?>" value="1"> 1
<input type="radio" id="test<?php echo $i ?>_2" name="test<?php echo $i ?>" value="2"> 2
</div>
<div id="show<?php echo $i ?>" style="display:none">
테스트1
</div>
<?php } ?>
html은 이런식으로 있습니다.
for문을 돌려서 라디오 id, name 과 다음 id show 부분뒤의 숫자는 같이 증가하게 구현은 잘 되었습니다.
(for i 값이 10이면 라디오 10과 show 10까지 잘 나옵니다.)
그런데 여기서 제이쿼리로 라디오 test$i 의 value 1을 클릭하였을때 show$i를 보여주게 할려고 하는데 제이쿼리는 for문 안에서 클릭 이벤트가 발동을 하지가 않네요.
(라디오 test1의 value 1을 클릭하면 show1이 보여지고 test7의 value 1을 클릭하면 show7이 보여지는식)
for문 밖으로 꺼내서 수동으로 10개까지 넣으면 잘 됩니다.
제이쿼리 코드는 아래와 같습니다. 원래 제이쿼리 for문 안에서 할려면 다른 방법이 있을까요?
<script>
for (var i=1; i<=10;i++){
$("input:radio[name=test"+i+"]").click(function(){
if($("input:radio[name=test"+i+"]:checked").val()=='1'){
$("#show"+i+"").show();
}else{
$("#show"+i+"").hide();
}
});
}
</script>
답변 1
$("input[name^='test']").on("click", function() {
var n = $(this).attr("name").replace("test", "");
var flag = $(this).val() == 1 ? "block" : "none";
$("#show" + n).css("display", flag);
});
감사합니다! 잘됩니다!
답변을 작성하시기 전에 로그인 해주세요.