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 - 在某些日期和時間顯示/隱藏元素？

回答

相關問題