时间戳

首页 > 解决方案 > 如果文档在 30 天内未更新，如何取消突出显示文本

jquery - 如果文档在 30 天内未更新，如何取消突出显示文本

问题描述

我有随机文档，其中包含一个按钮，允许最终用户根据特定 ID 取消突出显示文本。每个文档都有一类不同的日期：

<div class="date">10/09/2019</div>

例如，如果文档 30 天没有更新，是否有一种方法可以自动取消突出显示突出显示的任何文本，并让它保持这种状态，而无需刷新每个文档并返回到它被突出显示的原始状态。以下是我到目前为止的代码：

<button id="removeClass">Remove highlight</button>

<div class="date">10/09/2019</div>

<p id="para1">This is paragraph 1</p>


<style type="text/css">
.highlight {background:green;}
</style>

    <script type="text/javascript">

    $('#para1').addClass('highlight');

        $("#addClass").click(function () {

          $('#para1').addClass('highlight');

        });

        $("#removeClass").click(function () {

          $('#para1').removeClass('highlight');

    $('p').each(function(){
      if(this.id){(this.id = "");}
    });

        });

    </script>

标签： jqueryhtmlcss

解决方案

您可以使用 jQueries 使用类.each()检查每个元素并.date为其执行操作。在参数函数中，您可以使用 访问当前.date元素$(this)。
在您的情况下，您需要检查 div 中的日期是否与当前日期相隔 30 天以上。如果是这种情况，那么您删除.highlight该类。

请注意，为了能够用于parent().find() 导航到p日期所属的右侧，您的 HTML 需要包含在 中div，如图所示。

<div>
    <button id="removeClass">Remove highlight</button>
    <div class=“date”&gt;10/09/2019</div>
    <p id=“para1”&gt;test test test test test test test test test test</p>
</div>

$(".date").each(function() {
    var diff = new Date(new Date() - Date.parse($(this)[0].innerText));
    var days = diff/1000/60/60/24;

    if (days > 30) {
        $(this).parent().find("p").removeClass('highlight');
    }
})

推荐阅读