问通过聊天模块中的div刷新div
EN

Stack Overflow用户

提问于 2016-03-24 12:10:04

回答 1查看 37关注 0票数 0

下面是我的聊天模块的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>

jquery

html

css

回答 1

Stack Overflow用户

发布于 2016-03-24 13:24:47

使用empty

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

https://jsfiddle.net/f6kjhejs/3/

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/36193143

复制

相似问题

问通过聊天模块中的div刷新div
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问通过聊天模块中的div刷新divEN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问通过聊天模块中的div刷新div
EN