jquery - jQuery：如果内容更改为某些文本，则执行某些操作

Question

我想隐藏/显示 Y div，基于 X div 的内容，但 X div 在页面加载后填充（通过 jQuery）。如何使用 jQuery 检测此内容更改。

这是我试图实现的一个例子（不工作）：

https://codepen.io/aida-stamo/pen/GXmVgW

$('#field-first-div').change(function() {
  $('#first-div').text($(this).val());
});

// what I want to happen but is not happening

if ($("#first-div").text() == 'first-value') {
  $("#second-div").hide();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="field-first-div" name="field-first-div">
  <option value=""></option>
  <option value="first-value">first-value</option>
  <option value="second-value">second-value</option>
</select>


<div id="first-div"></div>
<div id="second-div">second div content</div>

请不要将此标记为重复。我查看了其他类似的问题，但找不到答案，因为它们要么对已加载的内容执行操作，要么处理选择标签。

标签： jquery

Answer 1

您可以使用该DOMSubtreeModified事件：

var first = $('#first-div'),
  second = $("#second-div");

$('#field-first-div').change(function() {
  first.text($(this).val());
});

// this will check if any changes happen to the contents of the first div:
first.on('DOMSubtreeModified', function() {
  if ($(this).text() == 'first-value') {
    second.hide();
  } else {
    second.show();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="field-first-div" name="field-first-div">
  <option value=""></option>
  <option value="first-value">first-value</option>
  <option value="second-value">second-value</option>
</select>


<div id="first-div"></div>
<div id="second-div">second div content</div>
jquery

虽然它似乎已被弃用，取而代之的是MutationObserver

var targetNode = $('#first-div');

// Options for the observer (which mutations to observe)
var config = {
  attributes: false,
  childList: true,
  subtree: false
};

// Callback function to execute when mutations are observed
var callback = function(mutationsList) {
  for (var mutation of mutationsList) {
    if (mutation.type == 'childList') {
      if (targetNode.text() === 'first-value') {
        $('#second-div').hide();
      } else {
        $('#second-div').show();
      }
    }
  }
};

// Create an observer instance linked to the callback function
var observer = new MutationObserver(callback);

// Start observing the target node for configured mutations
observer.observe(targetNode[0], config);


$('#field-first-div').change(function() {
  targetNode.text($(this).val());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="field-first-div" name="field-first-div">
  <option value=""></option>
  <option value="first-value">first-value</option>
  <option value="second-value">second-value</option>
</select>

<div id="first-div"></div>
<div id="second-div">second div content</div>