Javascript 在 jquery 中监听类的变化
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3731807/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Listen for change of class in jquery
提问by Snazawa
Is there a way in jquery to listen for a change to a node's class and then take some action on it if the class changes to a specific class? Specifically, I'm using the jquery tools tabs plugin with the slideshow and as the slideshow is playing, I need to be able to detect when the focus is on a particular tab/anchor so that I can unhide a specific div.
jquery 中是否有办法侦听节点类的更改，然后在类更改为特定类时对其采取一些操作？具体来说，我将 jquery 工具选项卡插件与幻灯片一起使用，并且在播放幻灯片时，我需要能够检测焦点何时位于特定选项卡/锚点上，以便我可以取消隐藏特定的 div。
In my specific example, I need to know when:
在我的具体示例中，我需要知道何时：
<li><a class="nav-video" id="nav-video-video7" href="#video7-video">Video Link 7</a></li>
changes to the following with the class "current" added:
添加了“current”类后对以下内容进行了更改：
<li><a class="nav-video" id="nav-video-video7 current" href="#video7-video">Video Link 7</a></li>
Then I want to unhide a div at that moment.
然后我想在那一刻取消隐藏一个 div。
Thanks!
谢谢！
采纳答案by JSuar
Here are some other finds that might provide a solution:
以下是一些可能提供解决方案的其他发现：
- Most efficient method of detecting/monitoring DOM changes?
- How can I detect when an HTML element's class changes?
- Monitoring DOM Changes in JQuery
And as it was suggested in #2, why not make currenta class that is added, rather than a ID, and have the following CSS handle the show/hide action.
正如 #2 中所建议的，为什么不创建current一个添加的类，而不是一个 ID，并让以下 CSS 处理显示/隐藏操作。
<style type='text/css>
.current{display:inline;}
.notCurrent{display:none;}
</style>
Might also be worth it to look into .on() in jquery.
在 jquery 中查看.on()也可能值得。
回答by Wood
You can bind the DOMSubtreeModifiedevent. I add an example here:
您可以绑定DOMSubtreeModified事件。我在这里添加一个例子：
$(document).ready(function() {
$('#changeClass').click(function() {
$('#mutable').addClass("red");
});
$('#mutable').bind('DOMSubtreeModified', function(e) {
alert('class changed');
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="mutable" style="width:50px;height:50px;">sjdfhksfh
<div>
<div>
<button id="changeClass">Change Class</button>
</div>回答by codeMonkey
I know this is old, but the accepted answer uses DOMSubtreeModified, which has now been deprecated for the MutationObserver. Here's an example using jQuery (test it out here):
我知道这是旧的，但接受的答案使用DOMSubtreeModified，现在已被MutationObserver. 这是一个使用 jQuery 的示例（在此处进行测试）：
// Select the node that will be observed for mutations
let targetNode = $('#some-id');
// Options for the observer (which mutations to observe)
const config = { attributes: true, childList: false, subtree: false, attributeFilter: ['class'] };
// Callback function to execute when mutations are observed
const callback = function(mutationsList, observer) {
for (let mutation of mutationsList) {
if (mutation.attributeName === "class") {
var classList = mutation.target.className;
// Do something here with class you're expecting
if(/red/.exec(classList).length > 0) {
console.log('Found match');
}
}
}
};
// Create an observer instance linked to the callback function
const observer = new MutationObserver(callback);
// Start observing the target node for configured mutations
observer.observe(targetNode[0], config);
// Later, you can stop observing
observer.disconnect();
回答by pete otaqui
With anything like this you have essentially two options, callbacks or polling.
对于这样的事情，您基本上有两个选择，回调或轮询。
Since you possibly can't get an event to be triggered when the DOM mutates in this way (reliably across all platforms) you may have to resort to polling. To be a bit nicer about it, you could try using the requestAnimationFrame api rather than just using something like setInterval natively.
由于您可能无法在 DOM 以这种方式（可靠地跨所有平台）发生变异时触发事件，因此您可能不得不求助于轮询。为了更好地了解它，您可以尝试使用 requestAnimationFrame api，而不仅仅是使用像 setInterval 这样的本机。
Taking the most basic approach (i.e. using setInterval and assuming jQuery) you might try something like this:
采用最基本的方法（即使用 setInterval 并假设使用 jQuery），您可能会尝试这样的事情：
var current_poll_interval;
function startCurrentPolling() {
current_poll_interval = setInterval(currentPoll, 100);
}
function currentPoll() {
if ( $('#nav-video-7').hasClass('current') ) {
// ... whatever you want in here ...
stopCurrentPolling();
}
}
function stopCurrentPolling() {
clearInterval(current_poll_interval);
}
