[英]Keep checking If Div contains specific text
您好,所以我想繼續檢查一個函數,如果一個div包含特定文本,這是我到目前為止的內容,但是似乎沒有任何作用?
JS
var interval = 500;
var timer = window.setInterval(function() {
var text = $('.text-split-original').text();
var checkText = '4) PLACEHOLDER '
if(text == checkText){
alert("It has this text");
//do something
};
}, interval);
的HTML
<div class="sar__label">
<div class="text-split-original">
4) PLACEHOLDER
<br>
</div>
</div>
在此先感謝您的幫助。
您只需要修剪空間就可以了。
var interval = 500; var timer = window.setInterval(function() { var text = $.trim($('.text-split-original').text()); var checkText = $.trim('4) PLACEHOLDER ') if(text == checkText){ alert("It has this text"); //do something }; }, interval);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <div class="sar__label"> <div class="text-split-original"> 4) PLACEHOLDER <br> </div> </div>
添加.trim()
將刪除導致比較失敗的空白:
var text = $('.text-split-original').text().trim();
另外, checkText
字符串'4) PLACEHOLDER '
在末尾包含一個額外的空格,這也會破壞比較。
除此之外,運行間隔不是執行事情的最有效方法。 也許您可能想看看div的內容何時更改 。 編輯 :不推薦使用,如@Barmar所指出,請參閱MutationObserver 。
在此處查看您的固定代碼(我已注釋掉間隔以防止自己發垃圾郵件): https : //codepen.io/anon/pen/JMRbMx
沒有JQuery:
<html>
<script>
var interval = 500;
var timer = window.setInterval(function() {
var text = document.getElementById('myId').innerHTML;
var checkText = 't'
console.log(text);
console.log(checkText);
if(text == checkText){
alert("It has this text");
//do something
};
}, interval);
</script>
<div class="sar__label">
<div id="myId" class="text-split-original">t</div>
</div>
</html>
我故意刪除了div中的所有空格。 您需要trim()空格,或操縱文本以匹配大小寫。
一個很好的插件可以在https://j11y.io/javascript/monitoring-dom-properties/上找到 -是的,它是通過setInterval / clearInterval實現的。 但是一個簡單的watch()插件的想法讓我很高興。
當然,它的版本較舊(大約2009年),但仍然有效。
/********** * jQuery plugin to allow monitoring of any * DOM el's properties. It does so by * a setInterval/clearInterval hook. Taken from * https://j11y.io/javascript/monitoring-dom-properties/ **********/ jQuery.fn.watch = function(id, fn) { return this.each(function() { var self = this; var oldVal = self[id]; $(self).data( 'watch_timer', setInterval(function() { if (self[id] !== oldVal) { fn.call(self, id, oldVal, self[id]); oldVal = self[id]; } }, 100) ); }); return self; }; jQuery.fn.unwatch = function(id) { return this.each(function() { clearInterval($(this).data('watch_timer')); }); }; /***** * This is the part that does stuff. * The updater updates that content div * and the contentEl.watch leverages the * above extensible plugin. It's watching * the vanilla 'innerText' attribute of * that DOM el. *****/ var contentEl = $(".content"); $(".updater").on("keyup", function() { contentEl.text($(this).val()) }) contentEl.watch("innerText", function(propName, oldVal, newVal){ console.log('Text has been changed from '+oldVal+' to ' + newVal); })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="content"> </div> <input type="text" class="updater" />
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.