以下是我的聊天模块的 html 代码。在其中，我希望将 Jquery 代码添加到 msg_header 中的(青色)刷新按钮，这样每当我单击它时，我输入的所有消息都会被删除。
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">.
</script>
<script>
$(document).ready(function(){
$(".close").click(function(){
$(".msg_box").hide();
});
$(".msg_head").click(function(){
$(".msg_wrap").slideToggle("slow");
});
$('textarea').keypress(
function(e){
if(e.keyCode==13){
var msg=$(this).val();
$("<div class='msg_b'>"+msg+"</div>").insertBefore('.msg_insert');
}
});
});
</script>
<style>
.reload{
left:120px;
width: 15px;
height: 15px;
border: 1px solid cyan;
border-left-color: transparent;
border-radius: 25px;
transform: rotate(45deg);
position:relative;
}
.reload:before
{
content: ' ';
position: absolute;
width: 0;
height: 0;
left: 0px;
top: 11px;
border: 2px solid;
border-color: cyan transparent transparent cyan;
}
.msg_box{
cursor:pointer;
position:fixed;
bottom:0px;
right:20px;
background:white;
width:250px;
border-radius:5px 0px 0px 5px;
}
.msg_head{
background:#3498db;
padding:15px;
color:white;
border-radius:5px 0px 0px 5px;
height:15px;
}
.msg_box{
background:white;
width:250px;
bottom:-5px;
}
.msg_body{
height:250px;
font-size:12px;
overflow:auto;
overflow-x:hidden;
}
.msg_head{
background:#3498db
}
.close{
float:right;top:-10px;
}
.msg_input{
width:100%;
padding:5px;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
border: transparent;
border-top:1px solid #bdc3c7;
}
.msg_a{
min-height:15px;
margin-top:5px;
padding:15px;
background:#99FFCC;
margin-left:20px;
margin-right:20px;
border-radius:5px;
position:relative;
}
.msg_a:before
{
content: ' ';
position: absolute;
width: 0;
height: 0;
left: -30px;
top: 9px;
border: 15px solid;
border-color:transparent #99FFCC transparent transparent;
}
.msg_b{
min-height:15px;
margin-top:5px;
padding:15px;
background:#FFFF99;
margin-left:20px;
margin-right:20px;
border-radius:5px;
position:relative;
}
.reload{left:175px;top:-18px;}
.msg_b:before
{
content: ' ';
position: absolute;
width: 0;
height: 0;
right: -29px;
top: 8px;
border: 15px solid;
border-color:transparent transparent transparent #FFFF99;
}
</style>
</head>
<body>
<div class="msg_box">
<div class="msg_head">Rishabh Sood
<div class="close"> X </div>
<div class="reload"></div>
</div>
<div class ="msg_wrap">
<div class ="msg_body">
<div class ="msg_a">Hey bro wassup!</div>
<div class ="msg_b">All nice!</div>
<div class="msg_insert"></div>
</div>
<div class="msg_footer"><textarea class="msg_input" rows="4" placeholder="Enter Message"></textarea></div>
</div>
</body>
</html>
最佳答案
使用空
$(".close").click(function() {
$(".msg_box").hide();
});
$(".reload").click(function() {
$(".msg_body").empty();
});
$(".msg_head").click(function(e) {
if (!$(e.target).is('.reload')) {
$(".msg_wrap").slideToggle("slow");
}
});
$('textarea').keypress(
function(e) {
if (e.keyCode == 13) {
var msg = $(this).val();
if(msg.trim().length > 0 ) {
$("<div class='msg_b'>" + msg + "</div>").appendTo('.msg_body');
$(this).val('');
}
}
});
关于jquery - 通过聊天模块中的 div 刷新 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36193143/