2

我需要一些关于 jQueury 的帮助。我正在构建一个侧边栏时间表，其中包含“前一天”和“下一天”按钮。我想要的是，如果用户访问该网站，它将显示当天的结果（无需单击任何按钮）。但是，如果用户单击“下一个”或“上一个”，它将显示请求日期的结果。

数据是从 /home/schedule/ url 获取的。例如，如果 url 是：/home/schedule/20130331，它将获取 3 月 31 日的计划注册。

我有这段代码，但是，它当然不起作用。我对 jQuery 不是很好，所以任何帮助将不胜感激。

<div class="btn-group" style="padding-bottom:3px;">
  <a href="#" id="prev" class="btn">Previous Day</a>
  <a href="#" id="next" class="btn">Next Day</a>                
</div>
<div id="displayResults" name="displayResults"></div>

<script type="text/javascript">
$("#next, #prev").click(function(e){
    e.preventDefault();
    $.ajax({
        url: '{{ URL::base() }}/home/schedule/' + date,
        data: date,
        type: 'GET',
        success: function (data) {
            $('#displayResults').html(data);
        }
    });
});
</script>
4

1 回答 1

1

最后：

HTML 前一天 下一天 在 js fiddle 中你不会看到 url 的任何变化

CSS

#displayResults {
    width: 300px;
    height: 200px;
    border: 1px solid;
    padding: 10px;
}

JS

var tm;//holds timer that checks changing of url
var date='';// holds the date
    $(document).ready(function(){

        getDateFromUrl();

        updateNextBack()

        tm=setInterval(function(){ // check that is the url changed
            var tmp;
            tmp=date;
            getDateFromUrl();
            if(date!=tmp){
                updateNextBack()
                changeDate();
            }
        },300);


        function updateNextBack(){// updates next and back links
            $('#next').attr('href','#'+nextDay(date));
            $('#prev').attr('href','#'+prevDay(date));
        }

        function getDateFromUrl(){//anallyse url
            var str=new String(document.location);
            date='';
            if(str.indexOf('#')>0){
                date=str.substr(str.indexOf('#')+1,str.length-str.indexOf('#'));
            }if(date==''){
                date='20130329';
            }
            date=addToDate(date,0);
        }

        function addToDate(md,i){// adds i to md and then return md
            var tmp=new String(md); // to get date in string format

            var day , month , year; // these will hold year month and day
            day=tmp.substr(6,2);
            month=parseInt(tmp.substr(4,2))-1;
            year=tmp.substr(0,4);
            var myDate=new Date();// create a date object and set its year month and day
            myDate.setFullYear(year);
            myDate.setMonth(month);
            myDate.setDate(day);

            myDate.setDate(myDate.getDate()+i); // adds i day to date
            md=''+myDate.getFullYear();
            md+=''+(myDate.getMonth()<9?'0':'');
            md+=''+parseInt(myDate.getMonth())-(-1);
            md+=''+(myDate.getDate()<10?'0':'');
            md+=''+parseInt(myDate.getDate());

            return md;
        }

        function nextDay(md){// you should write real function
            return addToDate(md,1);
        }

        function prevDay(md){// you should write real function
            return addToDate(md,-1);
        }

        $('#next').click(function(){// for clicking next
        // its empty !!!
        });

        $('#prev').click(function(){// for clicking prev
        // its empty !!!
        });

        function changeDate(){// uses $.get('filename',callbackfunc) to update div value related to date val
            /*$.get('getDate.php?d='+date,function(data){ // you should uncomment this when you are in server
                $('#displayResults').html(data);
            });*/

            //use this when in jsfiddle
            data='content of date:'+date;
            $('#displayResults').html(data);
        }

    });

这里是工作小提琴。

于 2013-04-01T06:06:50.760 回答