[英]Adding a class transversely with JQuery based on click event
背景
我正在構建一個通知下拉列表,顯示通知何時被讀取或未讀取。 用戶可以通過單擊圖標將通知標記為“已讀”,從而將其變為復選標記和工具提示,該工具提示將更改為使其未讀的選項。 因此,如果它未讀,則圖標為黃色,工具提示顯示“標記為已讀”。 如果用戶單擊它以使其讀取,則圖標將切換為復選標記,變為綠色,工具提示將更改文本以將其標記為未讀。 所有這一切工作,然而,又是在左側另一個圖標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');
});
謝謝!
使用$(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>
使用.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);
如果你的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")
我認為你向上導航直到“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.