Question

我正在尝试使用div来隐藏基于日期/时间的区域。从我所看到的，我所拥有的应该是有用的。有人可以看看它，让我知道我在哪里？

我使用HHMMSS以便在进行更改时可以继续测试，但实际编码只需要YYYYMMDD。

以下是代码：

<html>
    <head>
    <script src="http://code.jquery.com/jquery-2.1.3.min.js" type="text/javascript">
    </script>
    <style>
        .container {
            display: none;
        }
    </style>

    </head>

    <body>

    THIS IS A TEST SCRIPT<br />

    <div class=".container" id="one" data-hideafter="20150430 091400")
    <p>content one goes here</p>
    hi

    </div>

    hi there

    <div class=".container" id="two" data-hideafter="20150430 091430")
    <p>content two goes here</p>

    </div>

    <script>
        $(function() {
            var currentDate = newDate();

            $('.container').each(function() {
                if ($(this).data-hideafter) < currentDate)
                $(this).show();
            }
            }
        })();
    </script>

    </body>
</html>

还有很多其他编码最终会在div之间进行，但它主要是表格。

谢谢， BAC

Answer 1

通过数据属性访问数据：

$(this).data("hideafter");

并且您需要将结果解析为Date：

new Date($(this).data("hideafter"))

完整代码：

$(function() {
   var currentDate = new Date();

   $('.container').each(function() {

     d = $(this).data("hideafter");
     year = d.substring(0, 4);
     month = parseInt(d.substring(4, 6)) - 1;  // Subtruct 1 here as month start from zero in javascript date object
     day = d.substring(6, 8);
     hour = d.substring(9, 11);  
     minutes = d.substring(11, 13);    
     second = d.substring(13, 15);
     element_date = new Date(year, month, day, hour, minutes, second); 
     if (element_date < currentDate){
       $(this).show();
      }
   });

})();

此外，您显示的类容器存在问题

class=".container"  // wrong
class="container"   // correct

Answer 2

首先，您拥有的HTML无效。所以，我在发布问题时假定出了问题。尝试使用以下HTML和JavaScript 隐藏容器foo（明天将隐藏容器bar）：

<div class="container" id="foo" data-hide-after="2015-04-29">Foo</div>
<div class="container" id="bar" data-hide-after="2015-04-30">Bar</div>
<div class="container" id="baz" data-hide-after="2015-05-01">Baz</div>

请注意，我已在此处更改日期格式，以便对其进行解析。另外，我将数据属性重命名为data-hide-after。

$(function() {
    var currentDate = new Date();

    $('.container').each(function() {
        var hideAfter = new Date($(this).data('hide-after'));
        if (currentDate > hideAfter) {
           $(this).hide();
        }
    });
})();

请注意，在上面的JavaScript中，我检查当前日期是 hide-after日期之后是否为。如果是这样，容器应隐藏。

<强> P.S。你现在可以删除它：

.container { display: none; }

更新

如果你想同时支持hide-after和show-after，你可以这样做：

<div class="container" id="foo" data-hide-after="2015-05-01T10:00:00">Foo</div> <div class="container" id="bar" data-hide-after="2015-05-01T20:00:00">Bar</div> <div class="container" id="baz" data-hide-after="2015-05-02">Baz</div> <div class="container" id="qux" data-show-after="2015-05-01">Qux</div>

请注意，最后一个容器有一个data-show-after元素。

$(function() { // first hide all show-after containers, since we only need to show them after the specified date. $('div[data-show-after]').hide(); var currentDate = new Date(); $('.container').each(function() { var hideAfter = $(this).data('hide-after'); var showAfter = $(this).data('show-after'); if (hideAfter) { var parsedHideAfter = new Date(hideAfter); if (currentDate > parsedHideAfter) { $(this).hide(); } } if (showAfter) { var parsedShowAfter = new Date(showAfter); if (currentDate > parsedShowAfter) { $(this).show(); } } }); })();

DIV编码不按预期工作

2 个答案:

更新