클릭을 해서 시간대를 다르게 표시할 수 있을까요??
본문
우선은 위 사진과 같이 되어있는데 왼쪽 날짜 부분을 클릭하면 오른쪽 시간이 뜹니다
이걸 예약 시간선택 젤 윗부분에 오전 || 오후 이렇게 버튼? 같은걸 만들어서 따로 클릭해서 나오게 하고 싶은데
어떻게 하면 가능하게 만들수 있을까요?? 도와주세요 ㅜㅜ
아래는 보시기에 필요한 코드입니다.
$time_array[1] = array("오전 10:30","오전 11:00","오전 11:30","오후 12:00","오후 12:30","오후 14:00","오후 14:30","오후 15:00","오후 15:30","오후 16:00","오후 16:30","오후 17:00","오후 17:30","오후 18:00","오후 18:30");
$time_array[2] = array("오전 10:30","오전 11:00","오전 11:30","오후 12:00","오후 12:30","오후 14:00","오후 14:30","오후 15:00","오후 15:30","오후 16:00","오후 16:30","오후 17:00","오후 17:30","오후 18:00","오후 18:30","오후 19:00","오후 19:30","오후 20:00","오후 20:30");
$time_array[3] = array("오전 10:30","오전 11:00","오전 11:30","오후 12:00","오후 12:30","오후 14:00","오후 14:30","오후 15:00","오후 15:30","오후 16:00","오후 16:30","오후 17:00","오후 17:30","오후 18:00","오후 18:30");
배열이 월화수목금토까지 나눠져 있습니다
<div class="schedule">
<div class="time">
<div class="time_list" id="time_list">
<ul class="bu4" id="time_list2">
<?php
$sym_diff = array_values(array_diff(array_merge($time_array[$day_type], $a), array_intersect($time_array[$day_type], $a)));
for($i=0; $i<$total; $i++){
$reservation_yn = "N";
$aaa = $sym_diff[$i];
$k2 = substr($aaa,6, 6);
$now = date("H:i");
$k2 = str_replace(':','',$k2);
$now = str_replace(':','',$now);
$v_strtotime = strtotime($currdate.$k2);
$now_strtotime = strtotime($nowdate.$now);
if ($v_strtotime > $now_strtotime )
{
$reservation_yn = "Y";
}
?>
<li class="time_cls {currtime:'<?php echo $aaa?>',reservation_yn:'<?php echo $reservation_yn?>'}"><a href="javascript:void(0);" class="showme"><?php echo $aaa?> <?php echo $reservation_yn=="Y"?"(예약가능)":"(예약불가)"?></a></li>
<?} ?>
<li> </li>
</ul>
</div>
</div>
</div>
위와 같이 배열을 불러오는거 같습니다.. 고수님들 도와주세요
답변 1
자바스크립트로 하시면 페이지내에서 동적인 처리가 가능합니다.
100% 코드를 짜드리면 질문자님께도 도움이 안 될 것 같습니다.
$(".time_cls a:contains(오전)").parent().css("display","none"); // 오전 사라지도록, jQuery 입니다.
핵심적인 예시 코드 올려드렸으니, 응용해서 활용해보세요.
으아.. 감사합니다 ㅜㅜ
근데 3시간동안 고민해봤는데 진도가 안나가네요..ㅜㅜ
시간 없으실거 알지만 .. 조금만 더 알려주시면 감사드리겠습니다 ㅜㅜ
html element는 클릭했을 때 이벤트를 발생시킬 수 있습니다. 또는, a href 를 통해 자바스크립트를 실행시킬 수 있습니다.
<a href="javascript:PM()">오후만</a>
이렇게 만든다면 "오후만"을 클릭했을 때 javascript의 PM 이라는 함수가 실행됩니다.
자바스크립트의 PM 함수에 위 코드를 넣는다면 "오후만"을 클릭하면 "오전"이라는 글자를 가지고 있는 a태그의 부모 (li)가 사라지게(display none)됩니다.
위 원리를 그대로 코드로 작성하시면 됩니다.
