当属性值使用jQuery或JavaScript更改时如何执行动作？
[英]How do I execute an action when an attribute value changes using jQuery or JavaScript?
问题描述
I have a div that contains the attribute aria-hidden . 
我有一个div ，其中包含aria-hidden属性。 I would like to set up a listener or execute an action each time the attribute value dynamically changes. 每当属性值动态更改时，我想设置一个侦听器或执行一个动作。
My div is 我的div是
<div class="slide2" aria-hidden="*"></div>
The value for "aria-hidden" could either be true or false. “ aria-hidden”的值可以为true或false。
My code is: 我的代码是：
$(document).ready(function () {
$(".slide2").bind('change', function(event) {
if ( $('.slide2').attr('aria-hidden') == 'false' ) {
alert('do something');
}
});
});
I have read examples using MutationObserver but that examples I've seen display an action being executed when ANY element attribute changes. 我已经阅读了使用MutationObserver示例，但是我看到的示例显示了在ANY元素属性更改时正在执行的操作。 I would like to see an example showing that when a specific div ( <div class="slide2"></div> ) changes an action is executed. 我想看一个示例，该示例显示当特定div（ <div class="slide2"></div> ）更改时执行的操作。
2 个解决方案
解决方案1
0 2017-08-22 13:12:44
Explanation 说明
Inside of the observer you have to check the attribute you want to change. 在observer内部，您必须检查要更改的attribute 。 I did it with pure javascript ( mutation.target.getAttribute('aria-hidden') ). 我是用纯Javascript做到的（ mutation.target.getAttribute('aria-hidden') ）。
With the attributeFilter you can choose specific attributes to observe. 使用attributeFilter您可以选择要观察的特定属性。 In your case aria-hidden . 就您而言， aria-hidden 。
The Important Part 重要部分
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')
}
}
});
});
Example 例
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>
解决方案2
0 2019-01-31 05:31:59
It works for me after I put the js code at the bottom of the file. 在我将js代码放在文件底部后，它对我有用。 The possible error occurs should be: 可能出现的错误应该是：
parameter 1 is not of type 'Node'
That is because the listener was executed before the DOM was read, so obviously, it has to be loaded before you call observe(node, config); 那是因为侦听器是在读取DOM之前执行的，因此很明显，必须在调用observe(node, config);之前加载它observe(node, config);
here is one suggestion: 这是一个建议：
<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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.