좀 더 자세하게 질문드립니다.. div의 show, hide 채택완료
아버지 홈페이지 만들어드리고 있는데 이 부분에서 막힙니다.
write.php에서 라디오 버튼으로 매매, 전세, 월세를 선택하면
아래 양식이 변하도록 했습니다.
https://kin-phinf.pstatic.net/20190726_222/1564080048609lfIAw_PNG/1.png" width="620" />
</p>
<p><input type="radio" name="wr_10" value="매매" <?php echo ($write['wr_10'] == "매매") ? " checked" : "";?> required>매매 </p>
<p><input type="radio" name="wr_10" value="전세" <?php echo ($write['wr_10'] == "전세") ? " checked" : "";?> required>전세 </p>
<p><input type="radio" name="wr_10" value="월세" <?php echo ($write['wr_10'] == "월세") ? " checked" : "";?> required>월세 </p>
<p> </p>
<p> <input type="hidden" id="radioId" value="매매"></p>
<p> </p>
<p><script type="text/javascript" src="<a href="http://code.jquery.com/jquery-1.8.1.min.js"></script>" target="_blank" rel="noopener noreferrer">http://code.jquery.com/jquery-1.8.1.min.js"></script></a></p>
<p><script type="text/javascript"></p>
<p>$(document).ready(function() {</p>
<p>// DOM 생성 완료 시 화면 숨김 (파라미터로 전달되는 id는 제외)</p>
<p>hideExclude("changes");</p>
<p>// radio change 이벤트</p>
<p>$("input[name=wr_10]").change(function() {</p>
<p>var radioValue = $(this).val();</p>
<p>if (radioValue == "매매") {</p>
<p>hideExclude("changes");</p>
<p>} else if (radioValue == "전세") {</p>
<p>hideExclude("changey");</p>
<p>} else if (radioValue == "월세") {</p>
<p>hideExclude("changem");</p>
<p>}</p>
<p>});</p>
<p>});</p>
<p>// text area 숨김</p>
<p>function hideExclude(excludeId) {</p>
<p>$("#changeTextArea").children().each(function() {</p>
<p>$(this).hide();</p>
<p>});</p>
<p>// 파라미터로 넘겨 받은 id 요소는 show</p>
<p>$("#" + excludeId).show();</p>
<p>}</p>
<p></script></p>
<p> </p>
<p><div id=changes>...</div></p>
<p><div id=changey>...</div></p>
<p><div id=changem>...</div></p>
<p>
이런식으로 구성했고요
https://kin-phinf.pstatic.net/20190726_59/1564080049140Wczuy_PNG/2.png" width="620" />
그래서 view.php에서 이렇게 거래종류에 해당 값(wr_10)이 들어오면 표시해주고
그것으로 div show, hide를 시켜주려고 하는데
</p>
<p>var trans = "<?php echo $view["wr_10"]; ?>";</p>
<p> </p>
<p>if (trans == "매매") {</p>
<p> $("#changes").show();</p>
<p> $("#changey").hide();</p>
<p> $("#changem").hide();</p>
<p>} else if (trans == "전세") {</p>
<p> $("#changes").hide();</p>
<p> $("#changey").show();</p>
<p> $("#changem").hide();</p>
<p>} else if (trans == "월세") {</p>
<p> $("#changes").hide();</p>
<p> $("#changey").hide();</p>
<p> $("#changem").show();</p>
<p>}</p>
<p>이 작동하지 않습니다...
wr_10이 넘어오지 않는가 싶어서 을 해보면
매매 전세 월세 글자 표시는 됩니다.
https://kin-phinf.pstatic.net/20190726_109/1564080110514MAo2A_PNG/3.png" width="620" />
현 상태는 show, hide가 먹질 않아서 거래 종류에 관계없이 모든 가격 div가 표시된 상태입니다.
2번째 사진처럼 표시하려면 어떻게 해야할지 고수님들의 조언이 절실합니다... ㅜㅜ
답변 2개
혹시 자바스크립트를 dom이 표시되기 전에 위치한 것인지요?
그렇다면 write.php 처럼
$(document).ready(function() {
});
로 감싸야 할 듯...
답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
그냥 단순하게 if 문으로 하셔도 되지 않나요?
</p>
<p><?php if($view['wr_10'] == "매매") { ?></p>
<p> <div id = 'changes'>
매매 관련 레이아웃
</div></p>
<p><?php } else if($view['wr_10'] == "전세") { ?></p>
<p> <div id = 'changey'>
전세 관련 레이아웃
</div></p>
<p><?php } else if($view['wr_10'] == "월세") { ?></p>
<p> <div id = 'changem'>
월세 관련 레이아웃
</div></p>
<p><?php } ?></p>
<p>댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인