元素更改时如何执行函数？(没有setInterval)

Question

我尝试配置我的脚本，根据所显示的报表类型(这是span元素.reportReason的文本)，自动单击页面上的某些按钮。

下面是这个页面的一个典型示例：http://www.blankmediagames.com/Trial/viewReport.php?id=1409368 (我无法链接页面来对报告进行表决，因为玩游戏必须满足过多的要求)。

在对报告进行表决之后，该网页将删除所有当前报表内容，并通过Jquery从另一个报表加载所有数据。在加载报表时(或者报表尚未加载)，它将#reportInfo的所有子div值设置为“-”，并从#reportContent中移除所有内部span类。

这是我的脚本的代码：

    switch ($('.reportReason').text()) {
    case "Inappropriate Username":
        //This is an INAPPROPRIATE USERNAME report
        reportIU();
        break;
    case "Spamming":
        //This is a SPAMMING report
        reportSpamming();
        break;
    case "Leaving":
        //This is a LEAVING report
        reportLeaving();
        break;
    case "Multi-accounting":
        //This is a MULTI-ACCOUNTING report
        reportMulti();
        break;
    default:
        //Report hasn't loaded or report type is 'Other'
        break;
}

我希望这样做，这样开关语句将在span元素.reportReason的文本每次更改时执行，而不是在设置间隔之后执行。有什么办法可以做到吗？

Answer 1

Tadaa :)

​

$( '#btn' ).click( function() {
  // simulate ajax change
  if( $( 'div#test' ).text() != "a" ) {
    $( 'div#test' ).text( "a" );
  }
} );

$('div#test').on('DOMNodeInserted',function() {
  console.log('div changed!');
  
  // do your switchy stuff
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Div:
<div id='test'>Some randome content.</div><br/>
<br/>
<input id='btn' type='button' value='Change div content'/>
<br/>

​

Answer 2

MutationObserver API

如果.reportReason是表单控件，如输入、文本区域、复选框等，那么在事件上访问其数据要比使用span容易得多。表单控件有专门的事件，如change和input，它们处理文本，但这又取决于可能不适用于您的情况的用户交互(至少以直接的方式)。

假设文本本身来自您很少或根本无法控制的源，我们将从span.reportReason开始，确定文本何时被插入其中。我建议你在将来追踪找到文本本身的来源所需的步骤。我肯定这是XY问题。

为了监视发生在span.reportReason上的更改，我们可以使用MutationObserver API。在下面的演示中，将创建一个观察者来检测span.reportReason内容的任何更改。它将在添加或删除文本时记录更改。注意:所有有console.log(...)语句的行都是调用函数的位置。我并不是要尝试在switch()中找到这些函数，所以它们被console.log替换了，这充分证明了代码的功能是正确的。

演示

有部分代码标记为：“测试不需要”，这意味着它只是为演示目的而包含，而对于解决方案本身并不是必需的。

​

var tgt = document.querySelector('.reportReason');
var cfg = {
  attributes: false,
  childList: true,
  characterData: true
};

var monitor = new MutationObserver(function(changes) {
  changes.forEach(function(change) {
    console.log();
    for (let i = 0; i < change.addedNodes.length; i++) {
      console.log(`MUTATION TYPE: ${change.type} | "${change.addedNodes[i].textContent}" added`);
    }

    for (let i = 0; i < change.removedNodes.length; i++) {
      console.log(`MUTATION TYPE: ${change.type} | "${change.removedNodes[i].textContent}" removed`);
    }
  });
});


monitor.observe(tgt, cfg);

function reportReason(e) {

  const flag = $('.reportReason').text();

  switch (flag) {
    case "Inappropriate Username":
      console.log(`‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾
REASON: Username sux.`);
      break;
    case "Spamming":
      console.log(`‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾
REASON: User is spamming scum.`);
      break;
    case "Account not validated":
      console.log(`‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾
REASON: User has not validated account yet.`);
      break;
    case "Multiple accounts":
      console.log(`‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾
REASON: User has multiple accounts, delete all but the newest account.`);
      break;
    default:
      console.log(`‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾
REASON: Specific Flag: ${flag}`);
      break;
  }
}



// TEST NOT REQUIRED

$('button').on('click', function() {
  let flag = $('#test').val();
  $('.reportReason').text(flag);
  reportReason();
});

// TEST NOT REQUIRED

.as-console-row:after {
  display: none !important
}

select,
button {
  font: inherit
}

<!--TEST NOT REQUIRED-->
<fieldset class='set'>
  <legend>Test</legend>
  <select id='test'>
    <option></option>
    <option>Inappropriate Username</option>
    <option>Spamming</option>
    <option>Account not validated</option>
    <option>Multiple accounts</option>
    <option>Other Reason...</option>
  </select>
  <button type='button'>TEST</button>
</fieldset>
<!--TEST NOT REQUIRED-->

<div>
  <span class="rititle">Reported Reason:</span>
  <span class="rivalue">
    <span class="reportReason"></span>
  </span>
</div>




<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

​