Question

因此，我受到了'＃34;发育迟缓＆＃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";

谢谢！

Answer 1

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

＆＃13;

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

jQuery - 在特定日期显示/隐藏元素＆amp;时间？

1 个答案: