Question

我想基于X div的内容隐藏/显示Y 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>

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

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>

Answer 2

您需要将/** * Get the friendly Bluetooth name of the remote device. * * <p>The local adapter will automatically retrieve remote names when * performing a device scan, and will cache them. This method just returns * the name for this device from the cache. * * @return the Bluetooth name, or null if there was a problem. */ @RequiresPermission(Manifest.permission.BLUETOOTH) public String getName() { if (sService == null) { Log.e(TAG, "BT not enabled. Cannot get Remote Device name"); return null; } try { return sService.getRemoteName(this); } catch (RemoteException e) {Log.e(TAG, "", e);} return null; }条件放在if函数中，以使第二个change在选择选择框的值时隐藏：

div

$('#field-first-div').change(function() {
  $('#first-div').text($(this).val());
  if ($("#first-div").text() == 'first-value') {
    $("#second-div").hide();
  }
});

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

2 个答案: