jQuery - 在特定日期显示/隐藏元素&时间?

时间:2014-10-05 13:09:35

标签: jquery

因此,我受到了'#34;发育迟缓"的任务的挑战。事件。我对jQuery很新,所以我在旅途中学习。我说我是最好的拍摄,在谷歌搜索后,我想我已经开始但我不知道如何继续。所以我在这里求助! :)

以下是我们的要求:

用户想要

的能力
  • 设置开始日期 [DD / MM / YYYY]
  • 设置结束日期
  • 设置开始时间 [HH:MM]
  • 设置结束时间
  • 添加网址
  • 添加新的BG图像路径

所以最终结果如下:

  • 开始日期前 - [原创横幅]
  • 开始日期至结束日期 - [特技横幅]
  • 结束日期后 - [原创横幅]

我得到了我需要做的事情,而且我认为我已经开始了 - 但我确定我的代码已经混淆了并且在错误的地方!

任何方向都会很棒!

这是我到目前为止的一个小提琴: http://jsfiddle.net/sfe0hs4v/1/

这里是变量列表,我希望最终用户能够更改:

var target = $('#stuntEvent');
var startDate = "04/10/2014";
var startTime = "09:00";
var endDate = "06/10/2014";
var endTime = "08:59";
var url = "http://www.google.co.uk";
var bgImg = "http://i.imgur.com/npe3PKm.gif";

谢谢!

1 个答案:

答案 0 :(得分:1)

好的我已经做了一些事情,我不知道它是否符合你的期望。问题是使用HTML5数据类型将信息传递给您的JS脚本,例如事件的开始/结束日期和时间,您的网址和后台网址。这意味着能够编辑事件打印到页面的方式,以便您可以合并这些元素。



(function ($) {
    function stuntEvent(target) {
        var startDate = new Date(target.data("start-date")),
            endDate = new Date(target.data("end-date")),
            url = target.data("href"),
            bgImg = target.data("bg-img");

        if (startDate <= fullDate && fullDate <= endDate) {
            target.prop('href', url);
            target.css({"background": "url(" + bgImg + ") center no-repeat #fff"});
        }
    }

    var fullDate = new Date();
    stuntEvent($('#stuntEvent'));
})(jQuery);
&#13;
body {
  background: #333;
}
#stuntEvent {
  width: 300px;
  height: 200px;
  background: url('http://i.imgur.com/eWoIOYD.gif') center no-repeat #ffffff;
  display: block;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="stuntEvent" data-start-date="10/04/2014 14:00" data-end-date="10/06/2014 17:00" data-bg-img="http://i.imgur.com/npe3PKm.gif" data-href="http://www.google.co.uk"></a>
&#13;
&#13;
&#13;