jQuery - 在某些日期和时间显示/隐藏元素？

所以我一直面临着“发育迟缓”事件的挑战。我对jQuery非常陌生，所以我在学习中。我说我会尽我最大努力，在谷歌搜索之后，我想我已经开始了，但我不知道如何继续。所以在这里我要求救！ :)jQuery - 在某些日期和时间显示/隐藏元素？

这里一直要求什么：

用户想要的能力，

设定开始日期[DD/MM/YYYY]
设定结束日期
设置开始时间[HH：MM]
设置结束时间
添加URL
添加新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";

谢谢！

来源

2014-10-05 Nick

为什么用jQuery做呢？首先我可以想到的是，您将加载背景图像2次 - 每次加载原始横幅，然后在开始日期，您将更改它的src并加载特技横幅图像。所以你最好在服务器端做这件事，并根据需要提供图片:)' – 2014-10-05 13:23:00

这会让我的生活变得更加轻松，但是我没有任何访问服务器端的权限。这就是为什么我需要这样做！ THANKs – Nick 2014-10-05 13:25:01

为什么用户能够更改特定事件的显示时间？你的意思是管理员？另外，如果你没有权限访问服务器端，你的双手是绑在一起的，因为你需要服务器以某种方式给前端一些关于给定事件如何显示的信息。 – 2014-10-05 13:27:23

好的我已经做了一些事情，我不知道它是否是你期望的。关键是使用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);

body { 
 
    background: #333; 
 
} 
 
#stuntEvent { 
 
    width: 300px; 
 
    height: 200px; 
 
    background: url('http://i.imgur.com/eWoIOYD.gif') center no-repeat #ffffff; 
 
    display: block; 
 
}

<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>

来源

2014-10-05 13:53:20

感谢您的帮助！这是我期望看到的结果，但是，我们仍然迎合早期浏览器，如IE7/8，我不确定这是否会起作用？这就是我最初尝试使用jQuery方法的原因。再次感谢！ – Nick 2014-10-05 14:07:48

这是使用jQuery，'.data（）'方法在jQuery中。所以这对旧版浏览器来说应该不成问题，jQuery在兼容性方面做得很好。另外，请记住接受这个作为你的问题的答案。 – 2014-10-05 14:09:50

jQuery - 在某些日期和时间显示/隐藏元素？

回答

相关问题