使用基于单击事件的 JQuery 横向添加类

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

$(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')">