2010-09-17 52 views
19

类的变化是否有jQuery的方式来侦听改变一个节点的类,然后对其采取一些行动,如果类变为具体的类?具体来说,我使用jquery工具标签插件的幻灯片和幻灯片正在播放时,我需要能够检测焦点何时在特定的选项卡/锚点,以便我可以取消隐藏特定的div。倾听jQuery中

在我具体的例子,我需要知道什么时候:

<li><a class="nav-video" id="nav-video-video7" href="#video7-video">Video Link 7</a></li> 

更改为与类下面的“当前”补充说:

<li><a class="nav-video" id="nav-video-video7 current" href="#video7-video">Video Link 7</a></li> 

然后我要取消隐藏在那一个div时刻。

谢谢!

+1

此[问题]的任何属性改变离子[1]的答案可以提供帮助。 [1]:http://stackoverflow.com/questions/6034161/how-can-i-detect-when-an-html-elements-class-changes – 2011-07-22 04:10:08

回答

2

这里有一些其他的发现可能提供了一个解决方案:

  1. Most efficient method of detecting/monitoring DOM changes?
  2. How can I detect when an HTML element’s class changes?
  3. Monitoring DOM Changes in JQuery

而且因为它是在2号建议,为什么不把current一添加了类,而不是ID,并使用以下CSS处理显示/隐藏操作。

<style type='text/css> 
    .current{display:inline;} 
    .notCurrent{display:none;} 
</style> 

也许值得去看看.on() in jquery

+2

谷歌把我带到这里。我查看了“.on()”,但不清楚在将类添加到元素时可能触发哪个事件。我处于与OP相似的状态,需要在添加类时触发,但由于插件在click事件中调用preventDefault,所以无法绑定到原始的单击事件。 – 2012-11-14 18:03:48

+0

自从我发布这个问题已经有一段时间了,坦率地说,我忘了我是如何处理它的。使用CSS来隐藏/取消隐藏div将是显而易见的解决方案,但我确信我必须有一些额外的事情正在进行,这使我无法保持这种简单。无论如何,我选择了@jsuar解决方案,因为它包含了一些有用的链接。 – Snazawa 2013-07-29 00:11:05

0

有了这样的事,你有两个基本的选择,回调或轮询。

既然你可能无法得到一个事件时,DOM这样变异(可靠地跨所有平台),你可能不得不求助于轮询被触发。为了更好地了解它,你可以尝试使用requestAnimationFrame api,而不是仅仅使用像setInterval这样的东西。

以最基本的做法(即使用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); 
} 
20

可以绑定DOMSubtreeModified事件。我在这里补充一个例子:

HTML

<div id="mutable" style="width:50px;height:50px;">sjdfhksfh<div> 
<div> 
    <button id="changeClass">Change Class</button> 
</div> 

的JavaScript

$(document).ready(function() { 
    $('#changeClass').click(function() { 
    $('#mutable').addClass("red"); 
    }); 

    $('#mutable').bind('DOMSubtreeModified', function(e) { 
     alert('class changed'); 
    }); 
}); 

http://jsfiddle.net/hnCxK/13/

0

研究之后,最好的答案,我发现是这样的jQuery插件在this SO answer中给出它绑定侦听器函数的地方上的HTML元素