MutationObserver API

Question

我尝试将脚本配置为根据要显示的报告类型（即span元素.reportReason的文本）自动单击页面上的某些按钮。

以下是该页面的典型示例：http://www.blankmediagames.com/Trial/viewReport.php?id=1409368 （我无法将页面链接到报告投票，因为玩游戏必须满足过多的要求。）

对报告进行投票后，该网页将删除所有当前报告内容，并通过Jquery从另一个报告中加载所有数据。在加载报告时（或未加载报告时），它将#reportInfo的所有子div值都设置为“-”，并从#reportContent中删除所有内部span类。 / p>

这是我的脚本的代码：

    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;
}

我想要这样做，以便switch语句将在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是表单控件（例如输入，文本区域，复选框等），那么在发生事件时访问其数据要比使用跨度要容易得多。表单控件具有专门的事件，例如change和input，它们处理文本，但是同样，这取决于用户交互，这可能不适用于您的情况（至少以直接方式）

假设文本本身来自您几乎无法控制的来源，我们将从span.reportReason开始并确定何时将文本插入其中。我建议将来您跟踪查找文本本身来源所必需的步骤。我确定这是XY Problem。

为了监视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>

元素更改时如何执行功能？（没有setInterval）

2 个答案:

MutationObserver API

演示

元素更改时如何执行功能？ （没有setInterval）

2 个答案:

MutationObserver API

演示

元素更改时如何执行功能？（没有setInterval）