클릭을 해서 시간대를 다르게 표시할 수 있을까요??

클릭을 해서 시간대를 다르게 표시할 수 있을까요??

QA

클릭을 해서 시간대를 다르게 표시할 수 있을까요??

본문

3659974726_1514945785.102.jpg

 

우선은 위 사진과 같이 되어있는데 왼쪽 날짜 부분을 클릭하면 오른쪽 시간이 뜹니다

 

이걸 예약 시간선택 젤 윗부분에 오전 || 오후 이렇게 버튼? 같은걸 만들어서 따로 클릭해서 나오게 하고 싶은데

 

어떻게 하면 가능하게 만들수 있을까요?? 도와주세요 ㅜㅜ

 

아래는 보시기에 필요한 코드입니다.

 

$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 입니다.

 

핵심적인 예시 코드 올려드렸으니, 응용해서 활용해보세요.

html element는 클릭했을 때 이벤트를 발생시킬 수 있습니다. 또는, a href 를 통해 자바스크립트를 실행시킬 수 있습니다.

<a href="javascript:PM()">오후만</a>

이렇게 만든다면 "오후만"을 클릭했을 때 javascript의 PM 이라는 함수가 실행됩니다.

자바스크립트의 PM 함수에 위 코드를 넣는다면 "오후만"을 클릭하면 "오전"이라는 글자를 가지고 있는 a태그의 부모 (li)가 사라지게(display none)됩니다.

위 원리를 그대로 코드로 작성하시면 됩니다.

답변을 작성하시기 전에 로그인 해주세요.
전체 358
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT