你好我想继续检查一个函数,如果一个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>
没有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()
将删除导致比较失败的空白:
var text = $('.text-split-original').text().trim();
此外,checkText
字符串'4) PLACEHOLDER '
在末尾包含一个额外的空间,这也将打破比较。
除此之外,运行间隔并不是最有效的方法。 也许你可能想要look at when the contents of the div change而不是。 编辑:@Barmar指出这是不推荐使用的,请参阅MutationObserver。
在这里查看您的固定代码(我已经注释了防止自己发送垃圾邮件的时间间隔):https://codepen.io/anon/pen/JMRbMx
一个伟大的插件就是在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" />