因此,我受到了'#34;发育迟缓"的任务的挑战。事件。我对jQuery很新,所以我在旅途中学习。我说我是最好的拍摄,在谷歌搜索后,我想我已经开始但我不知道如何继续。所以我在这里求助! :)
以下是我们的要求:
用户想要
的能力所以最终结果如下:
我得到了我需要做的事情,而且我认为我已经开始了 - 但我确定我的代码已经混淆了并且在错误的地方!
任何方向都会很棒!
这是我到目前为止的一个小提琴: 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";
谢谢!
答案 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;