javascript - 如何检测 DOM 元素的 class 属性何时发生变化？

Question

这需要一点解释。我正在使用带有 JWplayer 的 jquery 播放列表，基本上它的作用是读取播放列表 .xml 文件，并生成一个像这样的滚动菜单：

<div class="jw_playlist_playlist">
   <div class="jw_playlist_item even">
      <div class="jw_playlist_title">Title</div>
      <div class="jw_playlist_description"></div>
   </div>
   <div class="jw_playlist_item odd">
      <div class="jw_playlist_title">Title2</div>
      <div class="jw_playlist_description"></div>
   </div>
</div>

当一个项目被选中时，它会变为<div class="jw_playlist_item even playing">或<div class="jw_playlist_item odd">。有没有办法可以用 javascript 检测到这种变化，并提取标题？

Answer 1

I guess you could create a timer in JavaScript and check every X seconds if the element exists.

<script> 

var title = ""; 

$(function() { // wait till page is loaded

    // sets a timer to repeat the function every 1 second
    setInterval(function() { 
        // if .play class div exists, take the title of the song
        if ($(".play").length > 0) { 
            title = $(".play jw_playlist_title").html();
            updateData();
        } else { 
        // otherwise set the title to be empty
            title = ""; 
        } 
     }, 1000); 

});

function updateData() {
    $("#demo").html("Current Song: "+title);
}


 </script> 

 <p id="demo">My First Paragraph</p>