6

我有一个通过 ajax 更新的网页。它每 1 分钟加载一次更新的新闻提要。我想要做的是创建一个 javascript 来检测传入的日期字段并在其周围放置一个强标签。以下是通过的 html 示例：

<div class="results">
  <div class="article">
    <div class="date">jan 8, 2013</div>
    <p>Some content here</p>
  </div>
  <div class="article">
    <div class="date">feb 8, 2013</div>
    <p>Some content here</p>
  </div>
</div>

我可以编写更新它的基本 javascript，但它只会触发一次。如何让 javascript 检测“结果”元素中是否有任何更改并采取相应措施。

4

3 回答 3

2

如果您使用的是 JQuery（您应该使用标签标记您的问题jquery），那么您需要使用$.ajaxComplete. 如果您使用的是其他框架，还有其他类似的方法可以解决这个问题。

$(document).ajaxComplete(function() {
  $(".results .date").each(function() {
    var strong = $('<strong>').text($(this).text());
    $(this).empty().append(strong);
  });
});

// for this test, only to demonstrate, manually trigger an ajax complete event
function test() {
  $(document).trigger('ajaxComplete');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="results">
  <div class="article">
    <div class="date">jan 8, 2013</div>
    <p>Some content here</p>
  </div>
  <div class="article">
    <div class="date">feb 8, 2013</div>
    <p>Some content here</p>
  </div>
</div>
Test: <button onclick="test()">Trigger JQuery Ajax Complete Event</button>

检测结果变化的唯一方法是A）根据结果做出假设，说它承诺它是新的，或者B）将其与以前的版本进行比较。您可以使用$.ajaxSendstash 方法B的更改。

如果您使用方法A，则可以只跟踪最大日期，并且仅在日期更大时才执行某些操作，然后用该日期更新最大日期。

于 2016-09-28T03:34:31.590 回答
1

如果您不想使用 Ajax 成功回调，则可以使用 DOMSubtreeModified 事件。例如

$('div.results').bind("DOMSubtreeModified", function () {

        alert('changed');
 });

这将在 div.result 的内容更改时触发。在此事件中，您将能够使用 div.date 进行任何您想要的操作

于 2016-09-28T09:03:43.183 回答
1

您能否将侦听器附加到 Ajax（ .complete( )或.ajaxStop()），然后获取所有日期并将它们与今天的日期进行比较。如果它们匹配，则将日期加粗。像这样的东西：

$( document ).ajaxStop(function() {
    var today = new Date();

    $.each( $('.article .date'), function( i, el ){
        var el_text = el.text();
        if(el_text == today.toLocaleFormat('%b %d, %Y')) {
            el.html('<b>' + el_text + '</b>');
        }
    });
});
于 2016-10-04T14:35:45.783 回答