Question

我的div包含属性aria-hidden。我希望每次属性值动态更改时都设置一个侦听器或执行一个操作。

我的div

<div class="slide2" aria-hidden="*"></div>

＆＃34; aria-hidden＆＃34;的价值可能是真是假。

我的代码是：

$(document).ready(function () {
   $(".slide2").bind('change', function(event) {
     if ( $('.slide2').attr('aria-hidden') == 'false' ) {
        alert('do something');
     }
   });
});

我已经阅读了使用MutationObserver的示例，但我看到的示例显示了当ANY元素属性发生变化时正在执行的操作。我想看一个示例，显示当特定div（<div class="slide2"></div>）更改时，执行操作。

Answer 1

说明

在observer内，您必须检查要更改的attribute。我用纯javascript（mutation.target.getAttribute('aria-hidden')）做了使用attributeFilter，您可以选择要观察的特定属性。在您的情况下aria-hidden。

重要部分

var slideObserver = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    if (mutation.type == "attributes") {
      // here you can play with it now :)
      if (mutation.target.getAttribute('aria-hidden') == "true") {
        console.log('ok. aria-hidden is true') 
      } else {
        console.log(':s aria-hidden is false') 
      }      
    }
  });
});

实施例

＆＃13;

var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver

var slide = document.querySelector('.slide2')

document.querySelector('#btn').addEventListener('click', toggleAriaHiddenRole)

var slideObserver = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    if (mutation.type == "attributes") {
      
      // here you can play with it now :)
      if (mutation.target.getAttribute('aria-hidden') == "true") {
        console.log('ok. aria-hidden is true') 
      } else {
        console.log(':s aria-hidden is false') 
      }      
    }
  });
});

slideObserver.observe(slide, {
  attributes: true, //configure it to listen to attribute changes
  attributeFilter: ['aria-hidden'] // filter your attributes
});

function changeAriaHiddenRole(element, boolean) {
  element.setAttribute('aria-hidden', boolean)
}

function toggleAriaHiddenRole(boolean) {
  if (slide.getAttribute('aria-hidden') === "true") {
    changeAriaHiddenRole(slide, false)
  } else {
    changeAriaHiddenRole(slide, true)
  }
}

＆＃13;

<div class="slide2" aria-hidden="false"></div>
<button id="btn">toggle aria-hidden</button>

＆＃13;

Answer 2

这对我的作品后，我把js代码在该文件的底部。可能发生的错误应该是：

参数1的类型不是“节点”

这是因为侦听器是在读取DOM之前执行的，因此很明显，必须在调用observe(node, config);

之前将其加载。

这是一个建议：

<body>
<div class="slide2" aria-hidden="*"></div>
<script>
$(document).ready(function () {
   $(".slide2").bind('change', function(event) {
     if ( $('.slide2').attr('aria-hidden') == 'false' ) {
        alert('do something');
     }
   });
});
</script>
</body>

当使用jQuery或JavaScript更改属性值时，如何执行操作？

2 个答案:

说明

重要部分

实施例