채택완료

좀 더 자세하게 질문드립니다.. div의 show, hide

2019-07-26 (금) 03:52:54 5,147

아버지 홈페이지 만들어드리고 있는데 이 부분에서 막힙니다.

write.php에서 라디오 버튼으로 매매, 전세, 월세를 선택하면

아래 양식이 변하도록 했습니다.

첨부 이미지

Copy
<input type="radio" name="wr_10" value="매매" <?php echo ($write['wr_10'] == "매매") ? " checked" : "";?> required>매매&nbsp;&nbsp;

<input type="radio" name="wr_10" value="전세" <?php echo ($write['wr_10'] == "전세") ? " checked" : "";?> required>전세&nbsp;&nbsp;

<input type="radio" name="wr_10" value="월세" <?php echo ($write['wr_10'] == "월세") ? " checked" : "";?> required>월세&nbsp;&nbsp;

  

   <input type="hidden" id="radioId" value="매매">

 

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.min.js"></script>

<script type="text/javascript">

$(document).ready(function() {

// DOM 생성 완료 시 화면 숨김 (파라미터로 전달되는 id는 제외)

hideExclude("changes");

// radio change 이벤트

$("input[name=wr_10]").change(function() {

var radioValue = $(this).val();

if (radioValue == "매매") {

hideExclude("changes");

} else if (radioValue == "전세") {

hideExclude("changey");

} else if (radioValue == "월세") {

hideExclude("changem");

}

});

});

// text area 숨김

function hideExclude(excludeId) {

$("#changeTextArea").children().each(function() {

$(this).hide();

});

// 파라미터로 넘겨 받은 id 요소는 show

$("#" + excludeId).show();

}

</script>

 

<div id=changes>...</div>

<div id=changey>...</div>

<div id=changem>...</div>

이런식으로 구성했고요

첨부 이미지

그래서 view.php에서 이렇게 거래종류에 해당 값(wr_10)이 들어오면 표시해주고

그것으로 div show, hide를 시켜주려고 하는데

Copy
var trans = "<?php echo $view["wr_10"]; ?>";

 

if (trans == "매매") {

  $("#changes").show();

  $("#changey").hide();

  $("#changem").hide();

} else if (trans == "전세") {

  $("#changes").hide();

  $("#changey").show();

  $("#changem").hide();

} else if (trans == "월세") {

  $("#changes").hide();

  $("#changey").hide();

  $("#changem").show();

}

이 작동하지 않습니다...

wr_10이 넘어오지 않는가 싶어서 <?php echo $view['wr_10']; ?> 을 해보면 

매매 전세 월세 글자 표시는 됩니다.

첨부 이미지

현 상태는 show, hide가 먹질 않아서 거래 종류에 관계없이 모든 가격 div가 표시된 상태입니다.

2번째 사진처럼 표시하려면 어떻게 해야할지 고수님들의 조언이 절실합니다... ㅜㅜ

|

답변 2개 / 댓글 1개

채택된 답변
+20 포인트

혹시 자바스크립트를 dom이 표시되기 전에 위치한 것인지요?

그렇다면 write.php 처럼
$(document).ready(function() {

});

로 감싸야 할 듯...

답변에 대한 댓글 1개

제 삽질을 한방에 날려주셨습니다. 고맙습니다!!!!

그냥 단순하게 if 문으로 하셔도 되지 않나요?

Copy
<?php if($view['wr_10'] == "매매") { ?>

    <div id = 'changes'>
    매매 관련 레이아웃
    </div>

<?php } else if($view['wr_10'] == "전세") { ?>

    <div id = 'changey'>
    전세 관련 레이아웃
    </div>

<?php } else if($view['wr_10'] == "월세") { ?>

    <div id = 'changem'>
    월세 관련 레이아웃
    </div>

<?php } ?>

답변을 작성하려면 로그인이 필요합니다.