【发布时间】：2016-01-08 16:05:51
【问题描述】：
背景
我正在构建一个通知下拉菜单，用于显示通知何时已读或未读。用户可以通过单击图标将通知标记为“已读”，从而将其变为复选标记和工具提示，该选项更改为使其未读。因此，如果未读，则图标为黄色，工具提示显示“标记为已读”。如果用户单击它以使其已读，则图标将切换为复选标记，变为绿色，并且工具提示会更改文本以将其标记为未读。所有这些都正常工作，但是，li 左侧还有另一个图标，当用户单击我上面解释的图标时，我想将其切换为背景绿色。
我尝试了什么？
我尝试使用.parent()、.siblings()、.find() 和其他方法，因为我几乎可以肯定它们将是我的解决方案，但不幸的是，我要么得到了所有的切换，要么没有全部，或者正确的图标停止工作，等等。我显然没有正确构建我的函数参数。
我在中间的 li 上硬编码了 bg-success 类，以向您展示我想要实现的目标。
所以，如果有人可以在单击它自己的li 中的“已读/未读”图标时通过添加bg-success 类来帮助我将那个doggone 左图标的背景变为绿色，我将不胜感激。
这是我的CODEPEN
这也是我的代码：
HTML
<div class="container">
<header>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown open">
<a href="javascript:;" data-toggle="dropdown" class="dropdown-toggle has-notify" data-click="toggle-notify">
<i class="fa fa-bell"></i>
</a>
<ul class="dropdown-menu dropdown-notification pull-right">
<li class="dropdown-header">Notifications (5)</li>
<li class="notification-item">
<a href="javascript:;">
<div class="media"><i class="fa fa-exclamation-triangle"></i></div>
<div class="message"><p class="desc">Server down on 1/24/2016.</p></div>
<div class="option" data-toggle="tooltip" data-title="Mark as Read" data-click="set-message-status" data-status="unread" data-container="body"><i class="fa fa-circle-o"></i></div>
</a>
</li>
<li class="notification-item">
<a href="javascript:;">
<div class="media bg-success"><i class="fa fa-thumb-tack"></i></div>
<div class="message"><p class="desc">Approve documents in outbox.</p></div>
<div class="option read" data-toggle="tooltip" data-title="Mark as Unread" data-click="set-message-status" data-status="read" data-container="body"><i class="fa fa-circle-o"></i></div>
</a>
</li>
<li class="notification-item">
<a href="javascript:;">
<div class="media"><i class="fa fa-calendar-plus-o"></i></div>
<div class="message"><p class="desc">New event posted.</p></div>
<div class="option" data-toggle="tooltip" data-title="Mark as Read" data-click="set-message-status" data-status="read" data-container="body"><i class="fa fa-circle-o"></i></div>
</a>
</li>
</ul>
</li>
</ul>
</header>
</div>
CSS
.navbar-nav .open .dropdown-menu {
position: absolute;
background: #000;
border: 1px solid;
-webkit-box-shadow: 0 3px 8px rgba(0,0,0,0.25);
box-shadow: 0 3px 8px rgba(0,0,0,0.25);
}
.navbar .dropdown-menu.pull-right {
right: 0;
left: auto;
}
.navbar .dropdown-menu {
max-width: 360px;
left: 0;
}
.navbar-nav .open .dropdown-menu .dropdown-header {
padding: 5px 20px 8px;
border-bottom: 1px solid rgba(248,151,29,0.77);
color: rgba(248,151,29,0.77);
font-size: 15px;
font-weight: 100;
letter-spacing: 1px;
text-transform: uppercase;
font-family: "ABeeZee",sans-serif;
}
.dropdown-menu>li.dropdown-header {
padding: 5px 20px 8px;
border-bottom: 1px solid #bbb;
}
.dropdown-notification>li.notification-item {
position: relative;
}
.navbar-nav .open .dropdown-notification>li.notification-item>a {
padding: 15px 20px;
}
.dropdown-notification>li.notification-item a {
padding: 15px 20px;
}
.dropdown-menu>li>a {
font-size: 12px;
padding: 5px 20px;
color: #bbb;
}
.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus {
background: #101113;
color: #bbb;
}
.dropdown-notification>li.notification-item a:before,
.dropdown-notification>li.notification-item a:after {
content: '';
display: table;
clear: both;
}
.dropdown-notification>li.notification-item .media {
float: left;
width: 40px;
height: 40px;
overflow: hidden;
text-align: center;
line-height: 40px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
border-radius: 50%;
background: #ccc;
color: #000;
}
.dropdown-notification>li.notification-item .media i {
font-size: 15px;
}
.dropdown-notification>li.notification-item .media+.message {
margin-left: 50px;
}
.dropdown-notification>li.notification-item .message {
padding-right: 20px;
}
.dropdown-notification>li.notification-item .desc {
font-size: 12px;
font-weight: 300;
margin-bottom: 3px;
color: #8f8f8f;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
p {
color: #bbb;
}
.dropdown-notification>li.notification-item .option {
position: absolute;
right: 10px;
top: 10px;
padding: 5px 10px;
font-size: 12px;
}
.dropdown-notification>li.notification-item .option .fa:before {
color: #F8971D;
}
.dropdown-notification>li.notification-item .option.read .fa:before {
content: '\f058';
color: #47a877;
}
.bg-success {
background: #47a877 !important;
}
JQUERY
$('[data-click="set-message-status"]').on('click', function (e) {
e.stopPropagation();
e.preventDefault();
var status = $(this).attr('data-status');
var tooltipText = 'Mark as Read';
if (status == 'read') {
$(this).removeClass('read');
//$('.notification-item').find('.media').removeClass('bg-success');
$(this).attr('data-status', 'unread');
//$('.notification-item').find('.media').attr('data-status', 'unread');
} else {
$(this).addClass('read');
//$('.notification-item').find('.media').addClass('bg-success');
$(this).attr('data-status', 'read');
//$('.notification-item').find('.media').attr('data-status', 'read');
tooltipText = 'Mark as Unread';
}
$(this).tooltip('hide').attr('data-original-title', tooltipText).tooltip('fixTitle');
});
谢谢！
【问题讨论】：
标签： javascript jquery