Nghe để thay đổi lớp học trong jquery

Question

Có cách nào trong jquery để nghe thay đổi đối với lớp của nút hay không và sau đó thực hiện một hành động nào đó nếu lớp đó thay đổi thành một lớp cụ thể? Cụ thể, tôi đang sử dụng các plugin tab công cụ jquery với trình chiếu và khi trình chiếu đang phát, tôi cần có khả năng phát hiện khi tiêu điểm nằm trên một tab/neo cụ thể để tôi có thể ẩn một div cụ thể.

Trong ví dụ cụ thể của tôi, tôi cần phải biết khi nào:

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

thay đổi như sau với lớp "hiện tại" thêm:

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

Sau đó, tôi muốn thôi ẩn một div ở đó chốc lát.

Cảm ơn!

Answer 1

Dưới đây là một số phát hiện khác có thể cung cấp một giải pháp:

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

Và như nó đã được đề xuất trong # 2, tại sao không làm cho current một lớp được thêm vào, thay vì một ID và có CSS ​​sau xử lý hành động hiển thị/ẩn.

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

Cũng có thể đáng để xem xét .on() in jquery.

Answer 2

Với bất kỳ thứ gì như thế này, bạn có hai lựa chọn về cơ bản, gọi lại hoặc bỏ phiếu.

Vì bạn có thể không thể tạo sự kiện được kích hoạt khi DOM thay đổi theo cách này (đáng tin cậy trên tất cả các nền tảng), bạn có thể phải sử dụng để bỏ phiếu. Để có một chút đẹp hơn về nó, bạn có thể thử sử dụng requestAnimationFrame api thay vì chỉ sử dụng một cái gì đó như setInterval nguyên bản.

Lấy phương pháp cơ bản nhất (ví dụ: sử dụng setInterval và giả jQuery), bạn có thể thử một cái gì đó như thế này:

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

Answer 3

Bạn có thể ràng buộc các sự kiện DOMSubtreeModified. Tôi thêm một ví dụ ở đây:

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/

Answer 4

Sau khi nghiên cứu này, câu trả lời tốt nhất mà tôi đã tìm thấy là jQuery plugin này được đưa ra trong this SO answer nơi nó liên kết một trình lắng nghe không đúng ion trên bất kỳ thay đổi thuộc tính nào của các phần tử HTML