如何讓這個功能監視變化？

Question

https://jsfiddle.net/1vm0259x/我想要它，所以當#b的內容改變它立即使div顯示。那可能嗎？由於CMS插件的限制，我不得不做一點小事。我不太瞭解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

你真的不能「看」在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); 
}); 

Answer 2

監視這樣的文字變化，最好的辦法是找到一種方法掛鉤到在瀏覽器中一些相關的和現有的事件和然後看看文本是否已經改變到你想要的。

在較新的瀏覽器（例如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 3

論MutationObserver頂部，由@jfriend00，有我們所掌握的可用舊的API，以及由名DOMSubtreeModified雄辯地。結合Internet Explorer的onpropertychange，我相信你會得到一個不錯的向後兼容更改事件。看看下面，沒有徹底雖然測試的片段：

段：

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>

希望這有助於雖然在某些方面。道歉，如果這不是你要找的，如果我完全誤解你的問題。