javascript - 从多个 div 获取属性以切换类

Question

因此，我尝试检查收件箱页面上的一堆 div，并从 AJAX 调用返回一个数组，以了解要更改哪些 div 的字体样式。为了实现这一点，我必须首先检查它们的数据值属性，然后添加/删除一个类(粗体与正常的已读/未读消息)。问题是，当我引用 messageDiv 对象时，它会切换页面上的所有消息。循环消息对我来说最有意义，但我不知道如何将 div 存储为数组来实现此目的。

data['messages']=[3,5,8,9]

var messageDiv=$('.widget .inbox-row');

if (data['status']=='A'){//read
    if ($.inArray(messageDiv.data('value'),data['messages']) && messageDiv.hasClass('unread-msg')) {
        messageDiv.removeClass('unread-msg').addClass('read-msg');
    }
}

if (data['status']=='N'){//unread
    if ($.inArray(messageDiv.data('value'),data['messages']) && messageDiv.hasClass('read-msg')) {
        messageDiv.removeClass('read-msg').addClass('unread-msg');
    }
}

这就是消息的样子，在页面上迭代了多次:

<div class="<?php echo $message_read_status; ?> inbox-row" data-value="<?php echo $messageid; ?>" >
            <?php echo $body; ?>
    </div>

真诚感谢您的帮助。抱歉，如果这是一个非常具体的问题。我试图让它尽可能不具体。

Answer 1

问题是 e 是一组元素，因此当您说 messageDiv.data('value') 时，它将返回第一个元素的数据值集合中的元素。

您需要迭代数组中的每一项并针对每一项运行条件

var messageDiv = $('.widget .inbox-row');

messageDiv.each(function () {
    var $this = $(this);
    if (data['status'] == 'A') { //read
        if ($.inArray($this.data('value'), data['messages']) > -1 && $this.hasClass('unread-msg')) {
            $this.removeClass('unread-msg').addClass('read-msg');
        }
    } else if (data['status'] == 'N') { //unread
        if ($.inArray($this.data('value'), data['messages']) > -1 && $this.hasClass('read-msg')) {
            $this.removeClass('read-msg').addClass('unread-msg');
        }
    }
})