事例1:
最近项目中要为聊天增加未读消息在对方读后变成已读的功能,和后台商量了具体逻辑之后,前后台都写好了逻辑,剩下的就是利用jQuery的
find()方法
将未读消息变为已读消息。
相关代码
<style>
html,
body {
min-height: 100%;
height: 100%;
background-color: #f7f7f7;
}
.talkContainter {
padding: 20px 12px;
padding-bottom: 72px;
background: #f7f7f7;
}
.timeTitle {
text-align: center;
margin-top: 20px;
margin-bottom: 20px;
}
.timeTitle span {
background: #cacbcc;
color: #fff;
border-radius: 4px;
padding: 0 8px;
height: 20px;
line-height: 20px;
font-size: 12px;
}
.talkItem {
display: flex;
align-items: center;
}
.sendMess1 {
background: #ffffff;
color: #333;
border-radius: 5px;
padding: 0 10px;
line-height: 35px;
min-height: 35px;
height: 100%;
margin-right: 5px;
}
.read{
position: absolute;
margin-right:2px;
color:#808080;
font-size:10px;
color: #ffffff;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
padding: 1.5px 1.5px;
}
.unReadColor{
background-color:#cacbcc;
}
</style>
<body id="bodyId">
<div class="talkContainter" id="talkContainter">
<div class='timeTitle'>
<span>2006-04-14</span>
</div>
<section class='talkItem' style='direction: ltr;'>
<span>
<img style='width:50px;height:50px;border-radius:50%;' class='iconImg' src='http://ymzp.0633hr.com/upload/app/2019-04-16/1555399938228-2019-04-16.jpg' />
</span>
<span style='position:relative;margin-left:5px;'>
<span class='sendMess1'>CoderZB</span>
<span class='triangelSend1'></span>
</span>
<div style='height:35px;'><span class='read unReadColor'>未读</span></div>
</section>
<div class='timeTitle'>
<span>1935-07-14</span>
</div>
<section class='talkItem' style='direction: rtl;'>
<span>
<img style='width:50px;height:50px;border-radius:50%;' class='iconImg' src='http://ymzp.0633hr.com/upload/app/2019-04-16/1555399938228-2019-04-16.jpg' />
</span>
<span style='position:relative;margin-left:5px;'>
<span class='sendMess1'>Love Share</span>
<span class='triangelSend1'></span>
</span>
<div style='height:35px;'><span class='read unReadColor'>未读</span></div>
</section>
<div class='timeTitle'>
<span>1935-07-14</span>
</div>
<section class='talkItem' style='direction: rtl;'>
<span>
<img style='width:50px;height:50px;border-radius:50%;' class='iconImg' src='http://ymzp.0633hr.com/upload/app/2019-04-16/1555399938228-2019-04-16.jpg' />
</span>
<span style='position:relative;margin-left:5px;'>
<span class='sendMess1'>Love Life</span>
<span class='triangelSend1'></span>
</span>
<div style='height:35px;'><span class='read unReadColor'>未读</span></div>
</section>
</div>
</body>
jQuery find()实现未读消息变已读消息
$("#talkContainter").find(".read").text("已读");
$("#talkContainter").find(".read").css({"background-color":"#70c67f"});
事例2:
两个div分别控制顶部标签栏和中部标签栏
选中 中间标签栏的某个标签(例如暂停中
)的时候,此时滚动标签栏到顶部时,要让顶部标签栏中的暂停中
选中。
反之 选中 顶部标签栏中的某个标签(例如暂停中
)的时候,此时滚动标签栏到中部时,要让中部标签栏中的暂停中
选中。
相关代码
<style>
body {
background: #fff;
color: #333;
}
.screen {
background: white;
}
.menuBox {
height: 44px;
width: 100%;
display: flex;
background: white;
border-bottom: 1px solid #eaebeb;
}
.menuBox .screen-middle {
flex-grow: 1;
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
align-items: center;
position: relative;
justify-content: center;
}
.menuBox .screen-middle-top {
flex-grow: 1;
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
align-items: center;
position: relative;
justify-content: center;
}
.screen-middle div {
font-size: 13px;
}
.tab-active {
font-weight: bold;
}
.tab-active:before {
content: '';
width: 20px;
height: 3px;
position: absolute;
left: 0;
right: 0;
bottom: 0px;
margin: auto;
z-index: 4;
background-color: #ff9829;
border-radius: 9px;
}
.doubleTitle {
display: none;
position: fixed;
width: 100%;
flex-direction: column;
z-index: 99;
background: #fff;
}
</style>
<body>
<div class="doubleTitle">
<div class="status" style="width:100%;background:#ff9829;"></div>
<div class="menuBox" >
<div class="screen-middle-top tab-active" tapmode>
<div class="nav" title="all">全部</div>
</div>
<div class="screen-middle-top" tapmode>
<div class="nav" title="hiring">招聘中</div>
</div>
<div class="screen-middle-top" tapmode>
<div class="nav" title="pause">暂停中</div>
</div>
<div class="screen-middle-top" tapmode>
<div class="nav" title="over">已结束</div>
</div>
<div class="screen-middle-top" tapmode>
<div class="nav" title="confirm">待审核</div>
</div>
<div class="screen-middle-top" tapmode>
<div class="nav" title="rejected">审核驳回</div>
</div>
</div>
</div>
<div class="screen">
<div class="menuBox">
<div class="screen-middle tab-active" tapmode>
<div class="nav" title="all">全部</div>
</div>
<div class="screen-middle" tapmode>
<div class="nav" title="hiring">招聘中</div>
</div>
<div class="screen-middle" tapmode>
<div class="nav" title="pause">暂停中</div>
</div>
<div class="screen-middle" tapmode>
<div class="nav" title="over">已结束</div>
</div>
<div class="screen-middle" tapmode>
<div class="nav" title="confirm">待审核</div>
</div>
<div class="screen-middle" tapmode>
<div class="nav" title="rejected">审核驳回</div>
</div>
</div>
</div>
</body>
jQuery find()为当前选中的标签添加类选择器,并同时为另一个功能一样的标签添加同样的类选择器
// 给类选择器为screen-middle的标签添加点击事件
$('.screen-middle').on('click', function() {
// 给当前点击的screen-middle添加tab-active选择器,移除和screen-middle同级的tab-active类选择器
$(this).addClass('tab-active').siblings().removeClass('tab-active');
// 在screen-middle里面找到类名为nav的标签,取出该标签title属性中的值
ordetType = $(this).find('.nav').attr('title');
// 遍历类选择器为screen-middle-top的标签 内容的长度
for (var i = 0; i <= $('.screen-middle-top').length; i++) {
// 如果 第i个screen-middle-top中的 名为nav的类选择器的title对应的值 等于ordetType,就执行{}
if($(".screen-middle-top").eq(i).find(".nav").attr('title') == ordetType){
console.log($(".screen-middle-top").eq(i).find(".nav").attr('title'));
// 移除screen-middle-top的所有tab-active
$(".screen-middle-top").removeClass('tab-active');
// 为遍历出的符合要求的 第i个screen-middle-top 添加tab-active。
$(".screen-middle-top").eq(i).addClass('tab-active');
}
}
// 网络请求
fnGetJobData(false);
})
// 给类选择器为screen-middle-top的标签添加点击事件
$('.screen-middle-top').on('click', function() {
// 给当前点击的screen-middle添加tab-active选择器,移除和screen-middle同级的tab-active类选择器
$(this).addClass('tab-active').siblings().removeClass('tab-active')
// 在screen-middle里面找到类名为nav的标签,取出该标签title属性中的值
ordetType = $(this).find('.nav').attr('title');
// 遍历类选择器为screen-middle的标签 内容的长度
for (var i = 0; i <= $('.screen-middle').length; i++) {
// 如果 第i个screen-middle中的 名为nav的类选择器的title对应的值 等于ordetType,就执行{}
if($(".screen-middle").eq(i).find(".nav").attr('title') == ordetType){
// 移除screen-middle的所有tab-active
$(".screen-middle").removeClass('tab-active');
// 为遍历出的符合要求的 第i个screen-middle添加tab-active。
$(".screen-middle").eq(i).addClass('tab-active');
}
}
fnGetJobData(false);
})
转载于:https://www.jianshu.com/p/629cc5930690