Question

https://jsfiddle.net/1vm0259x/我想拥有它，当#b的内容立即改变时，会显示div。那可能吗？由于CMS插件的限制，我不得不变得有点hacky。我不太了解jQuery。

标记

<div id="a">
    <span id="b">0 items</span>
</div>

的jQuery

$(document).ready(function(){

    if($('#b:contains("0 items")')) {
        $('#a').css("display", "none");
    }

    if($('#b:not(:contains("0 items"))')) {
        $('#a').css("display", "block");
    }

});

Answer 1

监视此类文本更改的最佳方法是找到一种方法来挂钩浏览器中的某个相关和现有事件，然后查看文本是否已更改为您想要的内容。

在较新的浏览器（例如IE11 +，最近版本的Chrome，Firefox和Safari）中，您可以使用DOM MutationObserver直接观看文本节点是否发生变化。

每当指定元素的子元素发生更改时，就会调用变异回调（子元素包含文本节点）。

以下是一些可运行的代码，用于在此代码段中监视div中的文本更改：

document.getElementById("go").addEventListener("click", function(e) {
    var t = document.getElementById("test");
    t.innerHTML = parseInt(t.innerHTML, 10) + 1;    
});

var m = new MutationObserver(function(mRecords, obj) {
    log("Current text value: " + document.getElementById("test").innerHTML);
}).observe(document.getElementById("test"), {childList: true, characterData: true, subtree: true});

function log(x) {
    var d = document.createElement("div");
    d.innerHTML = x;
    document.body.appendChild(d);
}

<button id="go">Click Me to Change the Text</button><br><br>
<div id="test">1</div><br><br>

如果您需要支持旧版本的IE，那么下一个最好的方法是找出浏览器中的现有事件在文本更改之前并监视这些事件。当其中一个事件发生时，您可以检查文本。例如，如果触发文本更改的操作始终在Ajax调用之后，您可以在系统范围内监视/挂钩Ajax调用，然后在每次Ajax调用完成后检查文本。因为只有在网页上已经发生其他事情时才会做任何事情，所以它非常有效。或者，如果文本仅在单击特定按钮或更改某个文本字段后更改，则可以使用事件侦听器监视这些DOM元素。

为了更具体地建议如何做到这一点，我们需要查看您的实际情况的详细信息，并且必须了解页面中的哪些事件会导致更改文本。这种持续时间较短的计时器也会对页面或其他标签中运行的动画等内容产生负面影响。

不建议使用短时间计时器来轮询DOM，因为这会影响移动电池的使用寿命，事实上，移动浏览器会尝试延迟或减慢您使用的任何长时间间隔计时器，以便尝试保留电池寿命。

Answer 2

在MutationObserver之上，由@ jfriend00 雄辩地提供，我们可以使用名为DOMSubtreeModified的旧版API。将其与onpropertychange Internet Explorer相结合，我相信您可以获得良好的向后兼容更改事件。看看下面的代码片段，但未经过彻底测试：

<强> 段：

var myDIV=document.getElementById('a');
var mySpan=document.getElementById('b');
var myButton=document.getElementById('button');
var myResult=document.getElementById('result');

if(window.addEventListener){
    myButton.addEventListener('click',onButtonClicked,false);
    mySpan.addEventListener('DOMSubtreeModified',onSpanModified,false);
}else{
    myButton.attachEvent('onclick',onButtonClicked);
    mySpan.attachEvent('onpropertychange',onSpanModified);
}

function onButtonClicked(){
    //mySpan.innerText=Math.random();
    mySpan.innerHTML=Math.random();
}

function onSpanModified(){
    myResult.innerHTML=mySpan.innerHTML;
}

<div id="a">
    <span id="b">0</span>
</div>
<input id="button" type="button" value="Click Me" />
<span id="result"></span>

希望这在某种程度上有所帮助。如果这不是你想要的，如果我完全误解了你的问题，请道歉。

Answer 3

你不能真正“看”JavaScript中的东西，因为它是一种事件驱动的语言（当涉及到对象属性时，这个规则有一些例外，但它不是通常有用的东西）。

相反，您应该设置定期更新的间隔。我使用了50毫秒的间隔，您可以选择使用您喜欢的任何间隔：

function update() {

    if($('#b:contains("0 items")').length) {
        $('#a').css("display", "none");
    }

    if($('#b:not(:contains("0 items"))').length) {
        $('#a').css("display", "block");
    }

}

$(document).ready(function () {
    setInterval(update, 50);
});

如何使此功能监视更改？

3 个答案: