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

【问题标题】：How do I execute an action when an attribute value changes using jQuery or JavaScript?当使用 jQuery 或 JavaScript 更改属性值时，如何执行操作？
【发布时间】：2019-01-31 13:31:59
【问题描述】：

我有一个包含aria-hidden 属性的div。每次属性值动态变化时，我想设置一个监听器或执行一个动作。

我的 div 是

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

“aria-hidden”的值可以是真或假。

我的代码是：

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

我已经阅读了使用MutationObserver 的示例，但是我看到的示例显示了当任何元素属性更改时正在执行的操作。我想看一个示例，显示当特定 div (<div class="slide2"></div>) 更改时执行操作。

【问题讨论】：

stackoverflow.com/questions/41424989/…
JavaScript: Listen for attribute change?的可能重复
@Roman 示例很接近并使用 MutationObserver 但示例与我的不相似。一个例子向我展示了如何设置我的属性并收听它。我想要一个示例，说明我的属性是否更改为特定值（真或假）而不仅仅是更改
@Mariton 你只需要做一个额外的检查 - 为你做了一个小代码片段.. 希望它有帮助:)

标签： javascript jquery

【解决方案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') 
      }      
    }
  });
});

示例

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)
  }
}

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

【讨论】：

似乎应该可以。这是一个很好的答案，但它不适合我
解释一下原因。也许我们可以一起找到解决办法
不确定，但我复制了您的代码并查看了控制台，但没有看到“好的”消息。 aria-hidden 是真的'或'好的。 aria-hidden 是假的。我的具体做法是<div class="slide2 slick-slide" data-slick-index="1" aria-hidden="true" tabindex="-1" role="option" aria-describedby="slick-slide01"></div>
我将“aria-role”添加到attributeFilter，这样您就只能观察到“aria-role”
不确定这是否有区别我确实注意到当 div <div class="slide2"> 变为活动状态时，将向 div 添加一个活动类，例如 <div class="slide2 active"> 。也许我应该在将活动添加到 div 时做点什么。不确定这是否有影响

【解决方案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>

【讨论】：