继续检查如果Div包含特定文本

问题描述 投票:1回答:4

你好我想继续检查一个函数,如果一个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>

在此先感谢您的帮助。

javascript jquery function if-statement
4个回答
2
投票

你只需要修剪空间,它就可以正常工作。

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>

1
投票

没有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中的所有空格。您需要修剪()空格,或操纵文本以匹配您的情况。


1
投票

添加.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


0
投票

一个伟大的插件就是在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" />
© www.soinside.com 2019 - 2024. All rights reserved.