Javascript 基于点击事件用JQuery横向添加类

背景

我正在构建一个通知下拉列表，显示通知何时已读或未读。用户可以通过单击图标将通知标记为“已读”，从而将其转换为复选标记和工具提示，更改选项以使其未读。因此，如果它是未读的，图标是黄色的，工具提示上写着“标记为已读”。如果用户单击它使其可读，图标将切换到复选标记，它将变为绿色，工具提示将更改文本以将其标记为未读。所有这些都在工作，但是，

li

左侧还有另一个图标，当用户单击上面解释的图标时，我想切换到背景绿色

我试过什么？

我尝试过使用

.parent（）

、

.sibbines（）

、

.find（）

和其他方法，因为我几乎可以肯定它们将是我的解决方案，但不幸的是，我要么得到了所有的to切换，要么根本没有，要么右图标停止工作，我显然没有正确地构造函数参数

我硬编码了中间的

bg success

类

li

，向您展示我正在努力实现的目标

因此，如果有人能帮我在点击它自己的

li

中的“读取/未读取”图标时，通过添加

bg success

类，将那该死的左图标的背景变成绿色，我将非常感激

这是我的

这是我的代码：

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>

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');
    });

---

谢谢大家!

使用

$（this.parents（'a'）。查找（'.media'）

并使用

addClass（）/removeClass（）

方法添加/删除类，以点击图标“read/unread”的

媒体类为目标：

$(this).parents('a').find('.media').addClass('bg-success'); //add class
//And 
$(this).parents('a').find('.media').removeClass('bg-success'); //remove class

希望这有帮助


一小条

$（'[data click=“set message status”]'）。在（'click'，函数（e）{
e、 停止传播（）；
e、 预防默认值（）；
var status=$（this.attr（'data-status'）；
var tooltipText='标记为已读'；
如果（状态==“已读”）{
$（this.removeClass（'read'）；
//$（'.notification item'）.find（'.media'）.removeClass（'bg-success'）；
$（this.attr（'data-status'，'unread'）；
//$（'.notification item'）.find（'.media'）.attr（'data-status'，'unread'）；
$（this）.parents（'a'）.find（'.media'）.removeClass（'bg-success'）；
}否则{
$（this.addClass（'read'）；
//$（'.notification item'）.find（'.media'）.addClass（'bg-success'）；
$（this.attr（'data-status'，'read'）；
//$（'.notification item'）.find（'.media'）.attr（'data-status'，'read'）；
$（this）.parents（'a'）.find（'.media'）.addClass（'bg-success'）；
tooltipText='标记为未读'；
}
$（this）.tooltip（'hide'）.attr（'data-original-title'，tooltipText.）.tooltip（'fixttitle'）；
});
.navbar导航打开下拉菜单{
位置：绝对位置；
背景：#000；
边框：1px实心；
-网络工具包盒阴影：0 3px 8px rgba（0,0,0,0.25）；
盒影：0 3px 8px rgba（0,0,0,0.25）；
}
.导航栏.下拉菜单.向右拉{
右：0；
左：自动；
}
.navbar.下拉菜单{
最大宽度：360px；
左：0；
}
.navbar导航打开下拉菜单下拉标题{
填充：5px20px 8px；
边框底部：1px实心rgba（248151,29,0.77）；
颜色：rgba（248151,29,0.77）；
字体大小：15px；
字号：100；
字母间距：1px；
文本转换：大写；
字体系列：“Abeeze”，无衬线；
}
.下拉菜单>li.下拉标题{
填充：5px20px 8px；
边框底部：1px实心#bbb；
}
.下拉通知>li.notification-item{
位置：相对位置；
}
.navbar导航打开.下拉通知>li.通知项>a{
填充：15px 20px；
}
.下拉通知>li.通知-项目a{
填充：15px 20px；
}
.下拉菜单>li>a{
字体大小：12px；
填充：5px20px；
颜色：#bbb；
}
.下拉菜单>li>a:悬停，.下拉菜单>li>a:焦点{
背景：#101113；
颜色：#bbb；
}
.下拉通知>li.通知-项目a:之前，
.下拉通知>li.通知-项目a:之后{
内容：''；
显示：表格；
明确：两者皆有；
}
.下拉通知>li.notification-item.media{
浮动：左；
宽度：40px；
高度：40px；
溢出：隐藏；
文本对齐：居中；
线高：40px；
-webkit边界半径：50%；
-moz边界半径：50%；
-ms边界半径：50%；
边界半径：50%；
背景：#ccc；
颜色：#000；
}
.下拉通知>li.notification-item.media i{
字体大小：15px；
}
.下拉通知>li.notification-item.media+消息{
左边距：50像素；
}
.下拉通知>li.notification-item.message{
右边填充：20px；
}
.下拉通知>li.notification-item.desc{
字体大小：12px；
字体大小：300；
利润底部：3倍；
颜色：#8F8F；
空白：nowrap；
溢出：隐藏；
文本溢出：省略号；
}
p{
颜色：#bbb；
}
.下拉通知>li.notification-item.option{
位置：绝对位置；
右：10px；
顶部：10px；
填充物：5px10px；
字体大小：12px；
}
.dropdown notification>li.notification-item.option.fa:before{
颜色：#F8971D；
}
.dropdown notification>li.notification-item.option.read.fa:before{
内容：'\f058'；
颜色：#47a877；
}
.bg成功{
背景：#47a877！重要；
}




通知（5）









根据单击的el选择最近的
通知项
$(this).parents('a').find('.media').addClass('bg-success'); //add class
//And 
$(this).parents('a').find('.media').removeClass('bg-success'); //remove class

if (status === 'read') {
    $(this).removeClass('read').attr('data-status', 'unread');
    $(this).closest('.notification-item').find('.media').removeClass('bg-success').attr('data-status', 'unread');
} else {
    $(this).addClass('read').attr('data-status', 'read');
    $(this).closest('.notification-item').find('.media').addClass('bg-success').attr('data-status', 'read');
    tooltipText = 'Mark as Unread';
}

if (status === 'read') {
    $(this).removeClass('read').attr('data-status', 'unread');
    $(this).prevAll('.media').first().removeClass('bg-success').attr('data-status', 'unread');
} else {
    $(this).addClass('read').attr('data-status', 'read');
    $(this).prevAll('.media').first().addClass('bg-success').attr('data-status', 'read');
    tooltipText = 'Mark as Unread';
}

var tooltipText = status === 'read' ? 'Mark as Unread' : 'Mark as Read';
var newStatus = status === 'read' ? 'unread' : 'read';
$(this).toggleClass('read', status !== 'read').attr('data-status', newStatus);
$(this).prevAll('.media').first().toggleClass('bg-success', status !== 'read').attr('data-status', newStatus);

<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>

$('[data-click="set-message-status"]').on('click', function (e) {

 var fa = $(this).siblings(".media").find("i.fa")

var fa = $(this).closest("li.notification-item").find(".media > i.fa")

var fa = $(this).closest("li.notification-item").find("i.fa")

$(this).parent().find(".media").removeClass('bg-success');