스크립트 질문입니다. 정말 미쳐버리겟습니다. 누구한테 맞으면서라도 배우고싶네요..
본문
가장최근 등록된 스킨을 커스텀중입니다..
날짜를 클릭하면 시간이 나오고요 그 시간에 예약을 하면 예약완료로 바꾸고 싶습니다. 근데요.
$(function(){
var aa = "<?php echo $bb?>"; // 이건 달력에 날짜를 클릭하여 db에서 추출된 시간입니다.
$('.time_cls a').each( function() { // 이건 ajax로 배열로 추출된 li의 a 태그입니다.
var str =$(this).text();
if (str) {
if (str.indexOf(aa) > -1) {
//$('.time_cls a').removeClass();
$(this).html("예약완료");
}
}
})
})
저장된 db와 ajax로 추출한 값과 비교하여 addClass를 하려는데요,
잘됩니다. 아래 이미지처럼 근데 문제는
이렇게요 db가 있는 시간만 바뀌어야 하는데 다른 ajax를 추출하면
이렇게 모두 바뀌어 있습니다....
버튼을 클릭하면 db가 호출되고, 그 db와 같은 li값만 바뀌어야 하는데..
다른 버튼은 같은 db가 없음애도 바뀌어 버립니다..
이해가 되시나요?? ㅠㅠㅠ
아래는 풀 코드 입니다..
제발.. 왜이럴까요..
<style type="text/css">
.actives {font-size:20px;}
</style>
<?php
error_reporting( E_CORE_ERROR | E_CORE_WARNING | E_COMPILE_ERROR | E_ERROR | E_WARNING | E_PARSE | E_USER_ERROR | E_USER_WARNING );
include_once('./_common.php');
$currdate = $_GET["currdate"];
//$nowdate = date("Ymd",strtotime("20150119"));
$nowdate = date("Ymd",time());
$day_type = date("N",strtotime($currdate)); // 1~5 평일, 6 토요일
$query = "select * from g5_write_counsel2 WHERE wr_1='".$currdate."' ";
$result = sql_query($query);
$mhp = sql_fetch_array($result);
$bb = $mhp['wr_2'];
//echo $k2 = substr($bb,6, 6);
$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");
$time_array[4] = 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[5] = 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[6] = array("10:30","11:00","11:30","12:00","12:30","14:00","14:30","15:00","15:30","16:00","16:30");
$now_hour = date("H:i",time());
//$now_hour = date("H:i",strtotime("13:13"));
?>
<script type="text/javascript">
$(function(){
var aa = "<?php echo $bb?>";
$('.time_cls a').each( function() {
var str =$(this).text();
if (str) {
if (str.indexOf(aa) > -1) {
//$('.time_cls a').removeClass();
$(this).html("예약완료");
}
}
})
})
</script>
<div class="schedule">
<div class="time">
<div class="time_list" id="time_list">
<ul class="bu4" id="time_list2">
<?php
foreach($time_array[$day_type] as $k=>$v)
{
$time_type = "오전";
$reservation_yn = "N";
if($v >= "12:00") {
$time_type = "오후";
}
$v_strtotime = strtotime($currdate.$v);
$now_strtotime = strtotime($nowdate.$now_hour);
if ($v_strtotime > $now_strtotime )
{
$reservation_yn = "Y";
}
?>
<li class="time_cls {currtime:'<?php echo $time_type." ".$v?>',reservation_yn:'<?php echo $reservation_yn?>'}"><a href="javascript:void(0);" class="showme"><?php echo $time_type." ".$v?> <?php echo $reservation_yn=="Y"?"(예약가능)":"(예약불가)"?></a></li>
<?php
}
?>
<li> </li>
</ul>
</div>
</div>
</div>
<div class="date_ok timedate">
<span class="date_choice time_class"></span><span>을 선택하셨습니다.</span>
</div>
!-->!-->
답변 1
일단 전반적으로 이해가 어렵습니다.
좌측 달력에서 날짜 클릭 -> 우측 해당 날짜의 시간 리스트가 예약 가능 여부와 함께
쭉 나오는 것으로 보입니다.
시간을 클릭했을 때, 해당 시간의 예약이 완료되었다는 DB 처리를 해주어야 하는데,
본문의 설명에서는 그 파일(그 부분)이 없는 것 같습니다.
맞게 짚었는지 잘 모르겠습니다만
제가 생각하는 로직은..
1) 사용자가 예약가능한 시간대를 클릭 onclick="resv('시간');"
2) 클릭했을 때 자바 스크립트 함수 호출 function resv_proc(time)
3) 예약 DB 처리를 할 파일 ajax 호출 ajax_resv_ok.php (update g5_write_counsel2 ~)
4) 정상적으로 DB 처리가 된 경우, 해당 시간대의 li 를 완료로 변경 if (ret_msg == "Y") $(this).closest('li').html("예약완료");