堆栈内存溢出
  繁体   English   中英

基于click事件使用JQuery横向添加类

[英]Adding a class transversely with JQuery based on click event

 原文  2016-01-08 16:05:51  7   4    javascript/ jquery

问题描述

背景

我正在构建一个通知下拉列表，显示通知何时被读取或未读取。 用户可以通过单击图标将通知标记为“已读”，从而将其变为复选标记和工具提示，该工具提示将更改为使其未读的选项。 因此，如果它未读，则图标为黄色，工具提示显示“标记为已读”。 如果用户单击它以使其读取，则图标将切换为复选标记，变为绿色，工具提示将更改文本以将其标记为未读。 所有这一切工作，然而，又是在左侧另一个图标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');
    });

谢谢！

4 个解决方案

解决方案1
 3  2016-01-08 16:13:54

使用$(this).parents('a').find('.media')并使用addClass()/removeClass() removeClass addClass()/removeClass()方法添加/删除类，将点击图标的media “读取/未读”定位： 

$(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"]').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'); $(this).parents('a').find('.media').removeClass('bg-success'); } else { $(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 = 'Mark as Unread'; } $(this).tooltip('hide').attr('data-original-title', tooltipText).tooltip('fixTitle'); }); 
  .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; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/> <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> <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>

解决方案2
 2 已采纳  2016-01-08 16:13:54

使用.closest()方法 ，根据单击的元素选择最近的.notification-item祖先。 这将是$(this).closest('.notification-item').find('.media') 。

也可以链attr()方法的后 .addClass() / .removeClass()方法，以及：

更新的示例 

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

作为旁注，您还可以使用$(this).prevAll('.media').first()来选择以前的.media元素：

更新的示例 

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

您还可以使用.toggleClass()代替.addClass() / .removeClass()来缩短逻辑。

更新的示例 

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

解决方案3
 2  2016-01-08 16:16:31

如果你的html结构不太可能改变，那么，鉴于： 

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

那么$(this)是div.option所以要到i.fa你可以去.media然后到i.fa ： 

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

或者，为了给你的html提供更多的灵活性，转到最适合的容器（ li而不是a ），然后到图标： 

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

你需要额外的.media >因为有两个i.fa ，这将特别为你提供第一个。

或者，您可以同时更改两者 

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

解决方案4
 1  2016-01-08 16:21:08

我认为你向上导航直到“a”元素然后从那里进行查找，但为了确保你得到正确的元素，你应该从事件目标中加注星标，例如： 

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

在这种情况下， $(this)引用观察者定义的项目，div具有数据点击属性，其中点击发生。

你可以改变$(this)为$(e.target)和“ .parent()为“ .closest('a')或“ .closest('li')

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 使用jQuery将click事件添加到类中 在具有循环和jQuery的同一类的所有元素上添加Click事件 jQuery的点击不添加类 根据基于对象属性的click事件向进度栏添加和删除活动类 Jquery：取消绑定类上的click事件 jQuery .click事件未向类注册 jQuery开关类在点击事件 jQuery单击事件与类的属性 jQuery在点击问题上添加类 流星：在click事件中向表元素添加类
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM