如何在对象字段中发生更改时提醒用户

Question

如果对象字段内有任何更改，我如何提醒用户

我正在尝试检测对象内部此div的更改

如果正常，代码将是这样：

<div id="HeaderNewMessageIcon" class="BrosixContactNewMessage" style="display:none;">
<a href="javascript:;" class="HeaderNewMessageIcon" title="Unread messages"></a>
</div>

但是如果有更改，它将如下所示：

<div id="HeaderNewMessageIcon" class="BrosixContactNewMessage" style="display: block; ">
<a href="javascript:;" class="HeaderNewMessageIcon" title="Unread messages: 1"></a>
</div>

我想通过警报或使用图像来提醒用户对象内部是否有变化。

我有什么办法实现这一目标？

另外，我无法访问对象内部的代码，我只能查看它，而不能编辑它。

Answer 1

我相信必须有一些JavaScript代码可以更改html，然后可以从那里调用方法。 您可以使用setInterval的其他方式。

您可以使用jQuery插件jQuery的Mutation Events插件 。 看到线程

    var a = document.getElementsByClassName('HeaderNewMessageIcon')[0];
var oldTitle = a.title;
setInterval(function(){
    if(a.title !== oldTitle){
          alert("Title change");  
        oldTitle = a.title;
    }
},100);

jsfiddle

Answer 2

您必须在进行用户交互（例如单击，鼠标悬停，鼠标按下等）时检测到更改，然后才能附加一个函数以查看其属性或其中的任何内容是否发生了变化。

//detect inputs change
$('#HeaderNewMessageIcon').find(':input').change(function(){ alert(...)});

//detect attributes change
$('#HeaderNewMessageIcon').click(function(){
   detectChange(this);
});

至于detectChange起作用，您必须在刚加载页面时保存属性

var attrs = $('#HeaderNewMessageIcon').get(0).attributes;

function detectChange(obj){
    //pseudo-code, you need to find a function on the web to commpare 2 objetcs
    if (obj.attributes === attrs){
        alert(...);
    }

    //the same comparison for the children elements $(obj).children()
}