Question

我正在尝试为我制作一个自定义的“昵称 - 荧光笔”，这是基于远程和基于javascript的网络聊天。很明显，我希望每次我的昵称出现在聊天中时，都会播放声音。

在这个聊天中有一个#TheChatDiv，每次用户写新内容时都会添加一个新的.NewChatText。

到目前为止，我已经尝试过这个：

$('#TheChatDiv').bind("DOMSubtreeModified",function(){
 // Do things, like play the song of your people.
});

实际效果很好，但我无法提取发布的聊天文本。问题是我还需要阅读发布的文本，以检测其中的昵称并使我的代码表现得像它所需要的那样。

知道我该怎么做吗？

Answer 1

一般情况下，只要在聊天元素中插入消息，然后在添加的消息中搜索您要查找的内容，就应该创建一个事件或触发一个函数，但是如果这不是一个选项，那么通常情况下您通常会更好变异观察者而不是弃用的DOMSubtreeModified事件，类似这样的

var observer = new MutationObserver(function(mutations) {
  $.each(mutations, function(_, mutation) {
      $.each(mutation.addedNodes, function(_, node) {
          if ( $(node).text().indexOf('Cyc') != -1) {
              // Play sound for Cyc
          }
      });
  });    
});

observer.observe(
    $('#TheChatDiv').get(0), 
    { attributes: true, childList: true, characterData: true }
);

FIDDLE

Answer 2

至于我，更好的方法是直接在receiveMessage函数中注入突出显示逻辑，其中NewChatText正在创建并附加到TheChatDiv。
我假设你有类似的东西：

function receiveMessage(message) {
    var chat = $('#TheChatDiv');
    $('<div>')
        .text(message)
        .addClass('NewChatText')
        .appendTo(chat);

    if (message.indexOf('YourNickName') {
        // Play sound, highlight etc.
    }
}

Answer 3

试试这个：

var nickname = $('.NewChatText .nickname').text();
if (nickname == 'YOURNAME') {
   // Insert your code here, the autor of .NewChatText is 'YOURNAME'
}

如果这不是您要搜索的回复，则应详细描述您的问题。

检测div中加载的新内容

3 个答案: