Question

是否可以将removeClass用于AJAX加载的DIV？

setInterval(function() {
    $('.message').each(function() {
        var message_id = $(this).data('id');
        if ($(this).hasClass('message-not-read')) {
            $.get('message-set-read.php?message-id=' + message_id, function(data) {
                if (data == 'is-set-read') {
                    $(this).removeClass('message-not-read'));
                }
            });
        }
    });
}, 5000);

课程.message和.message-not-read的DIV通过另一个$.load()加载

Answer 1

是的，但是在您进行AJAX调用之前，您必须存储this，因为它会改变您的上下文：

setInterval(function() {
    $('.message').each(function() {
        var that = $(this); //Here
        var message_id = that.data('id');
        if (that.hasClass('message-not-read')) {
            $.get('message-set-read.php?message-id=' + message_id, function(data) {
                if (data == 'is-set-read') {
                    that.removeClass('message-not-read'));
                }
            });
        }
    });
}, 5000);

Answer 2

问题是因为this处理程序内$.get的范围发生了变化，因此它不再引用迭代中的当前.message元素。您需要将该引用存储在变量中以便在内部范围中使用。

另请注意，您可以在选择器中包含所需的类并删除if条件，如下所示：

setInterval(function() {
  $('.message.message-not-read').each(function() {
    var $message = $(this);
    $.get('message-set-read.php?message-id=' + $message.data('id'), function(data) {
      $message.toggleClass('message-not-read', data !== 'is-set-read'));
    });
  });
}, 5000);

另请注意，循环遍历所有消息并每5秒为每个消息发送一个AJAX请求是一个非常糟糕的主意。反转逻辑以便你制作一个单一的AJAX请求来获取屏幕上所有可见消息的状态然后你可以更新，或者更好的是，如果你需要保留UI /服务器，那么使用websockets更有意义紧密同步的数据。

removeClass用于加载AJAX的内容

2 个答案: