查找类和添加删除类

Question

我有一个以下格式的页面。

<% (1..3).each do %>
<div class="each-message-content notification-message-content">
 <div class="">
  <div class="">
  </div>
 </div>
 <div class="">
 </div>
 <div class="">
 </div>
</div>
<div class="">
</div>
<div class="read-unread">
</div>
<% end %>

单击read-unread，我将添加一个已读或未读的类。但是当我检查类是否有已读或未读的类时，它总是执行if块。切勿进入else块。我该怎么做呢？

 $(document).on('click','.read-unread', function(){
        var $read_unread = $(this).closest('.notification-message-content');
        if($read_unread.hasClass('unread')){
            $read_unread.removeClass('unread');
            $read_unread.addClass('read');                
        } else if (($read_unread.hasClass('read'))){
            $read_unread.removeClass('read');
            $read_unread.addClass('unread');

        }

    });

Answer 1

使用明确的选择器可能会更好。

$(document).on('click','.read-unread', function(){
    $(this).prev().prev().toggleClass('read unread');   ;
});

请注意，'read‘/ 'unread’类中的一个需要已经存在。

Answer 2

试试这个：

$(document).on('click', '.read-unread', function () {
    var $read_unread = $(this).prevAll('.notification-message-content').first();
    $read_unread.toggleClass('unread read');
});

Answer 3

.closest()查找DOM树。.notification-message-content不在树上，它与.read-unread在同一级别。既然我们知道它在上面，你可以写

var $read_unread = $(this).prevAll('.notification-message-content');

它将查看树中所有之前的兄弟项。