Question

提前道歉可能是一个简单的问题，下面是令人震惊的javascript;

我的问题如下，网站上有一个横幅，每隔几秒就有四张图片。我正在努力推动'＃34;印象＆＃34;进入dataLayer，由GTM接收。要显示下一个图像（不是我自己），将z-index从0更改为下一个横幅图像的1。我最初尝试让变异观察者只对一张图像起作用。这很有效，但我很快发现z-index值在确定为1之前实际上改变了3次，所以实际上每次都有3次印象。理想情况下，我希望通过查看父div（并观察childList）来工作，并且每个横幅图像只触发一次展示，但是当我尝试它时，它只是说“所提供的节点为空”＃39;我想知道是否只是因为儿童的风格属性正在发生变化，而不是其他什么？

标题HTML是（当显示imagePane2时）;

＆＃13;

<div id="rotator_10690" class="imageRotator Homepage_Middle_Banner_Rotator">
<div class="imagePane Homepage_Middle_Banner_imagePane imagePane1" style="left: 0px; top: 0px; position: absolute; z-index: 0; opacity: 1; display: none;">
<div class="imagePane Homepage_Middle_Banner_imagePane imagePane2" style="left: 0px; top: 0px; position: absolute; z-index: 1;">
<div class="imagePane Homepage_Middle_Banner_imagePane imagePane3" style="left: 0px; top: 0px; position: absolute; z-index: 0; display: none;">
<div class="imagePane Homepage_Middle_Banner_imagePane imagePane4" style="left: 0px; top: 0px; position: absolute; z-index: 0; display: none;">

＆＃13;

父div的脚本是

＆＃13;

<script>
// select the target node
var target = document.querySelector('.rotator_10690');

//call mutation observer api
var MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
 
// create an observer instance
var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
      if(mutation.type==="attributes" && mutation.target.className.indexOf("imagePane")) {
         observer.disconnect();
         dataLayer.push({'event': 'paneImpression'});

      }
  });
});
 
var disconnect = observer.disconnect();
// configuration of the observer:
// pass in the target node, as well as the observer options
var config = { attributes: true, childList: true }
observer.observe(target, config);

＆＃13;

而对于imagePane2（我在这里尝试使用者返回false，试图在收到第一个突变后停止它，但是这没有用。我也有zIndex ===＆＃34 ; 1＆＃34;在这里也是如此，但仍然意味着每次发射3次或更多次印象。）。

＆＃13;

<script>
// select the target node
var target = document.querySelector('.imagePane2');

//call mutation observer api
var MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
 
// create an observer instance
var observer = new MutationObserver(function(mutations) {
  mutations.some(function(mutation) {
      if(mutation.type==="attributes" && mutation.target.className.indexOf("imagePane2")) {
         observer.disconnect();
         dataLayer.push({'event': 'paneImpression', 'pane': 'two'});

         return false;

      }
  });
});
 
var disconnect = observer.disconnect();
// configuration of the observer:
// pass in the target node, as well as the observer options
var config = { attributes: true }
observer.observe(target, config);


 

</script>

＆＃13;

任何人都可以提供的任何帮助都会非常感激，我已经尝试过无处不在但却无法正常工作。

谢谢

Answer 1

{ attributes: true, childList: true }

要求由于.rotator_10690属性的更改而导致的突变以及由于代码子元素的列表的更改而导致的突变。 childList从字面上听取了对孩子名单的修改，并没有听取孩子们自己的改变。

如果你想基本上获得所有孩子的所有突变，就像DOM事件在树上传播一样，你想要添加

subtree: true

MutationObserver不适用于儿童

1 个答案: