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 block。永远不要进入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');
});

DEMO

Answer 3

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

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

将查看树中所有以前的兄弟姐妹。

查找类并添加删除类

3 个答案: