javascript - 如何根据左侧元素的单击更改基于右侧窗格的名称?
问题描述
我正在尝试创建一个聊天应用程序。为此,我创建了一个 HTML 和 CSS 设计。
使用我编写的代码,我有两个方面:在左侧会有一个用户列表,并且项目是可点击的,所以当我点击用户时,用户名和 id 应该显示在另一个窗格的顶部.
<body>
<div class="container">
<h3 class=" text-center">Messaging</h3>
<div class="messaging">
<div class="inbox_msg">
<div class="inbox_people">
<div class="headind_srch">
<div class="recent_heading">
<h4>Recent</h4>
</div>
<div class="srch_bar">
<div class="stylish-input-group">
<input type="text" class="search-bar" placeholder="Search">
<span class="input-group-addon">
<button type="button"> <i class="fa fa-search" aria-hidden="true"></i> </button>
</span> </div>
</div>
</div>
<div class="inbox_chat">
<div class="chat_list active_chat">
<div class="chat_people">
<div class="chat_ib">
<h5><a href="#">satya<span class="chat_date"></span></a></h5>
<p>1</p>
<hr>
</div>
</div>
</div>
<div class="chat_list active_chat">
<div class="chat_people">
<div class="chat_ib">
<h5><a href="#">satya<span class="chat_date"></span></a></h5>
<p>2</p>
<hr>
</div>
</div>
</div>
<div class="chat_list active_chat">
<div class="chat_people">
<div class="chat_ib">
<h5><a href="#">laxmi<span class="chat_date"></span></a></h5>
<p>3</p>
<hr>
</div>
</div>
</div>
</div>
</div>
<div class="mesgs">
<div class="msg_history">
<div class="type_msg">
<div class="input_msg_write">
<input type="text" class="write_msg" placeholder="Type a message" />
<button class="msg_send_btn" type="button"><i class="fa fa-paper-plane-o" aria-hidden="true"></i></button>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
codepen 链接在这里。
解决方案
我添加了 Javascript 来完成这项任务。
全屏查看输出。
const personArr = document.querySelectorAll(".person_name");
personArr.forEach(item => {
item.addEventListener('click',() => {
document.querySelector("#insertName").innerText = "";
document.querySelector("#insertName").innerText = `${item.id}. ${item.innerText}`;
document.querySelector("#insertId").innerText = item.id;
})
})
.container {
max-width: 3000px;
margin: auto;
}
img {
max-width: 100%;
}
.inbox_people {
background: #f8f8f8 none repeat scroll 0 0;
float: left;
overflow: hidden;
width: 40%;
border-right: 1px solid #c4c4c4;
}
.inbox_msg {
border: 1px solid #c4c4c4;
clear: both;
overflow: hidden;
}
.top_spac {
margin: 20px 0 0;
}
.recent_heading {
float: left;
width: 40%;
}
.srch_bar {
display: inline-block;
text-align: right;
width: 60%;
padding: ;
}
.headind_srch {
padding: 10px 29px 10px 20px;
overflow: hidden;
border-bottom: 1px solid #c4c4c4;
}
.recent_heading h4 {
color: #05728f;
font-size: 21px;
margin: auto;
}
.srch_bar input {
border: 1px solid #cdcdcd;
border-width: 0 0 1px 0;
width: 80%;
padding: 2px 0 4px 6px;
background: none;
}
.srch_bar .input-group-addon button {
background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
border: medium none;
padding: 0;
color: #707070;
font-size: 18px;
}
.srch_bar .input-group-addon {
margin: 0 0 0 -27px;
}
.chat_ib h5 {
font-size: 15px;
color: #464646;
margin: 0 0 8px 0;
}
.chat_ib h5 span {
font-size: 13px;
float: right;
}
.chat_ib p {
font-size: 14px;
color: #989898;
margin: auto;
}
.chat_img {
float: left;
width: 11%;
}
.chat_ib {
float: left;
padding: 0 0 0 15px;
width: 88%;
}
.chat_people {
overflow: hidden;
clear: both;
}
.chat_list {
border-bottom: 1px solid #c4c4c4;
margin: 0;
padding: 18px 16px 10px;
}
.inbox_chat {
height: 550px;
overflow-y: scroll;
}
.active_chat {
background: #ebebeb;
}
.incoming_msg_img {
display: inline-block;
width: 6%;
}
.received_msg {
display: inline-block;
padding: 0 0 0 10px;
vertical-align: top;
width: 92%;
}
.received_withd_msg p {
background: #ebebeb none repeat scroll 0 0;
border-radius: 3px;
color: #646464;
font-size: 14px;
margin: 0;
padding: 5px 10px 5px 12px;
width: 100%;
}
.time_date {
color: #747474;
display: block;
font-size: 12px;
margin: 8px 0 0;
}
.received_withd_msg {
width: 57%;
}
.mesgs {
float: left;
padding: 30px 15px 0 25px;
width: 60%;
}
.sent_msg p {
background: #05728f none repeat scroll 0 0;
border-radius: 3px;
font-size: 14px;
margin: 0;
color: #fff;
padding: 5px 10px 5px 12px;
width: 100%;
}
.outgoing_msg {
overflow: hidden;
margin: 26px 0 26px;
}
.sent_msg {
float: right;
width: 46%;
}
.input_msg_write input {
background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
border: medium none;
color: #4c4c4c;
font-size: 15px;
min-height: 48px;
width: 100%;
}
.type_msg {
border-top: 1px solid #c4c4c4;
position: relative;
}
.msg_send_btn {
background: #05728f none repeat scroll 0 0;
border: medium none;
border-radius: 50%;
color: #fff;
cursor: pointer;
font-size: 17px;
height: 33px;
position: absolute;
right: 0;
top: 11px;
width: 33px;
}
.messaging {
padding: 0 0 50px 0;
}
.msg_history {
height: 516px;
overflow-y: auto;
}
<html>
<head>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" type="text/css" rel="stylesheet">
<div class="container">
<h3 class=" text-center">Messaging</h3>
<div class="messaging">
<div class="inbox_msg">
<div class="inbox_people">
<div class="headind_srch">
<div class="recent_heading">
<h4>Recent</h4>
</div>
<div class="srch_bar">
<div class="stylish-input-group">
<input type="text" class="search-bar" placeholder="Search">
<span class="input-group-addon">
<button type="button"> <i class="fa fa-search" aria-hidden="true"></i> </button>
</span> </div>
</div>
</div>
<div class="inbox_chat">
<div class="chat_list active_chat">
<div class="chat_people">
<div class="chat_ib">
<h5><a href="#" class="person_name" id="1">satya <span class="chat_date"></span></a></h5>
<p></p>
</div>
</div>
</div>
<div class="chat_list active_chat">
<div class="chat_people">
<div class="chat_ib">
<h5><a href="#" class="person_name" id="2">ferin <span class="chat_date"></span></a></h5>
<p></p>
</div>
</div>
</div>
<div class="chat_list active_chat">
<div class="chat_people">
<div class="chat_ib">
<h5><a href="#" class="person_name" id="3">laxmi<span class="chat_date"></span></a></h5>
<p></p>
</div>
</div>
</div>
</div>
</div>
<div class="mesgs">
<div class="msg_history">
<p id="insertName"></p>
<p id="insertId"></p>
<div class="type_msg">
<div class="input_msg_write">
<input type="text" class="write_msg" placeholder="Type a message" />
<button class="msg_send_btn" type="button"><i class="fa fa-paper-plane-o" aria-hidden="true"></i></button>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
推荐阅读
- nextflow - cmd进程中的nextflow展开
- css - Antora 补充 ui 从 doc.css 中的 doc 中删除 max-width
- python - 是否可以使用 DataFrame.query() 来判断列是否存在?
- javascript - 使用 TLE 线在地面轨迹图上显示轨道
- reactjs - CRA 开发服务器停止查看文件更改
- python - 了解 Python 在使用 VS-Code 时如何从子目录中导入模块
- python - 查找 lxml 的命名空间 URI
- flutter - 使用动作参数 Flutter 测试 Redux-Saga
- list - SwiftUI - List / ForEach 结合 NavigationLink 和 isActive 无法正常工作
- python-3.x - 当活动用户为root时Python获取用户名