javascript - 如何将 MutationOberserver 用于多个目标元素

Question

我有两个下拉元素。我希望我的突变观察者观察第一个 DOM 元素的变化并显示/隐藏一些 HTML 节点。当第二个 DOM 元素发生更改时，它会保持第一个选择不变，并根据更改显示/隐藏 HTML 节点。

这是我的 Javascript 代码 -

MutationObserver = window.MutationObserver || window.WebKitMutationObserver;

var targetDomId = "objAggrDropDown"
var onLoadVal = $('#' + targetDomId + ' .ComboBoxTextDivContainer').text();

var targetDomId2 = "collectionOrNode"
var onLoadVal1 = $('#' + targetDomId2 + ' .ComboBoxTextDivContainer').text();
if (onLoadVal1 == "Node") {

  if (onLoadVal == "Collection") {
    $("#collectionName").show();
    $("#nodeFilter").hide();
    $("#nodeButton").hide();
    $("#NodeTag").hide();
    $("#collectionSearch").hide();
    $("#collectionTop").hide();
  } else if (onLoadVal == "Network") {
    $("#collectionName").hide();
    $("#nodeFilter").hide();
    $("#nodeButton").hide();
    $("#NodeTag").hide();
    $("#collectionSearch").hide();
    $("#collectionTop").hide();
  } else {
    $("#collectionName").hide();
    $("#nodeFilter").show();
    $("#nodeButton").show();
    $("#NodeTag").show();
    $("#collectionSearch").hide();
    $("#collectionTop").hide();
  }
} else if (onLoadVal1 == "Collections") {
  if (onLoadVal == "Network") {
    $("#collectionName").hide();
    $("#nodeFilter").hide();
    $("#nodeButton").hide();
    $("#NodeTag").hide();
    $("#collectionSearch").hide();
    $("#collectionTop").hide();
  } else {
    $("#collectionName").hide();
    $("#nodeFilter").hide();
    $("#nodeButton").hide();
    $("#NodeTag").hide();
    $("#collectionSearch").show();
    $("#collectionTop").show();
  }
}
var myFunction = function(oldValue, newValue, oldVal2, newVal2) {
  if (newValue2 == "Node") {

    if (newValue == "Collection") {
      $("#collectionName").show();
      $("#nodeFilter").hide();
      $("#nodeButton").hide();
      $("#NodeTag").hide();
      $("#collectionSearch").hide();
    $("#collectionTop").hide();
    } else if (newValue == "Network") {
      $("#collectionName").hide();
      $("#nodeFilter").hide();
      $("#nodeButton").hide();
      $("#NodeTag").hide();
      $("#collectionSearch").hide();
      $("#collectionTop").hide();
    } else {
      $("#collectionName").hide();
      $("#nodeFilter").show();
      $("#nodeButton").show();
      $("#NodeTag").show();
      $("#collectionSearch").hide();
      $("#collectionTop").hide();
    }
  } else if (newValue2 == "Collections") {
    if (newValue == "Network") {
      $("#collectionName").hide();
      $("#nodeFilter").hide();
      $("#nodeButton").hide();
      $("#NodeTag").hide();
      $("#collectionSearch").hide();
      $("#collectionTop").hide();
    } else {
      $("#collectionName").hide();
      $("#nodeFilter").hide();
      $("#nodeButton").hide();
      $("#NodeTag").hide();
      $("#collectionSearch").show();
      $("#collectionTop").show();
    }
  }
}

var target = document.getElementById(targetDomId)
var target2 = document.getElementById(targetDomId2)

//callback is the function to trigger when target changes
var oldVal = target.innerText.trim()
var oldVal2 = target2.innerText.trim()
var callback = function(mutations) {
  newVal = $('#' + targetDomId + ' .ComboBoxTextDivContainer').text()
  newVal2 = $('#' + targetDomId2 + ' .ComboBoxTextDivContainer').text()
  if (newVal != oldVal || newVal2 != oldVal2) myFunction(oldVal, newVal, oldVal2, newVal2)
  oldVal = newVal;
  oldVal2 = newVal2;
  //if(newVal2!=oldVal2) myFunction(oldVal2,newVal2)
  //    oldVal2 = newVal2;
}

var observer = new MutationObserver(callback);

var opts = {
  childList: true,
  attributes: true,
  characterData: true,
  subtree: true
}

observer.observe(target, opts);
observer.observe(target2, opts);

HTML 代码

<SPAN id=collectionOrNode> <SpotfireControl id="2359784583e644aaaeb865a62d368704" /></SPAN>
<DIV id=objAggrDropDown>
<P><SpotfireControl id="d5032569138a45b0894af618c8d88618" /></P></DIV>

<DIV id=collectionName style="DISPLAY: none"><SpotfireControl id="b50ef08340c84db8a2f07e78edb9fd07" /></DIV>
<DIV id=NodeTag style="DISPLAY: none">Nodes</DIV>
<DIV id=nodeButton style="DISPLAY: none"><SpotfireControl id="7ee7c199883d4d0e860d1fb95695667a" /></DIV>
<DIV id=nodeFilter style="DISPLAY: none"><SpotfireControl id="c3aa1c9844af47c3a18fdb4629ccfabf" /></DIV>

<P class=collection><DIV id=collectionSearch style="DISPLAY: none"></DIV>
<DIV id=collectionTop style="DISPLAY: none"><SpotfireControl id="e5ab694e3d0a4309a7269b2c22c209fd" /></DIV>

感谢任何帮助。谢谢

标签： javascripthtmldomspotfiremutation-observers