基于点击事件

时间：2016-01-08 16:05:52

标签： javascript jquery

背景

我正在构建一个通知下拉列表，显示通知何时被读取或未读取。用户可以通过单击图标将通知标记为“已读”，从而将其变为复选标记和工具提示，该工具提示将更改为使其未读的选项。因此，如果它未读，则图标为黄色，工具提示显示“标记为已读”。如果用户单击它以使其读取，则图标将切换为复选标记，变为绿色，工具提示将更改文本以将其标记为未读。但是，所有这些都有效，li左侧还有另一个图标，当用户点击我上面解释的图标时，我想切换到背景绿色。

我尝试了什么？

我尝试使用.parent()，.siblings()，.find()和其他方法，因为我几乎可以肯定它们将成为我的解决方案，但我不幸地得到了所有的切换，或根本没有，或右图标停止工作，等等。我显然没有正确构建我的函数参数。

我对中间bg-success的{​​{1}}类进行了硬编码，以向您展示我想要实现的目标。

所以，如果有人可以通过在点击它自己li中的“读/未读”图标时添加bg-success课程来帮助我将该图片的背景变为绿色，我会非常感激

这是我的CODEPEN

这也是我的代码：

HTML 

li

CSS 

<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 

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

谢谢！

4 个答案:

答案 0 :(得分：3)

使用media定位所点击图标的“{1}}”“使用$(this).parents('a').find('.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>

答案 1 :(得分：2)

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

您也可以在 attr() / .addClass()方法之后链接.removeClass()方法：

Updated Example 

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元素：

Updated Example 

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()缩短逻辑。

Updated Example 

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

答案 2 :(得分：2)

如果你的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，这将特别为您提供第一个。{/ p>

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

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

答案 3 :(得分：1)

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

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

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

您可以更改$(this)的{​​{1}}和“$(e.target)”或“.parent()”的“.closest('a')”

相关问题
最新问题