我正在尝试创建一个小型的实时聊天应用程序,我需要“聊天管理员”按钮来在单击时打开聊天容器,并且在再次单击时也要隐藏,就像切换效果一样。我尝试使用jQuery
toggleClass
,但未正确获得实现。
谢谢。
$(document).ready(function(){
var chatbtn = $('.ph-chat-button');
wrap = document.createElement('div');
chatbtn.append('<span><i clas="fa fa-chat"></i> Chat Admin</span>');
chatbtn.on('click',function(ev){
ev.preventDefault();
$(this).empty();
$(this).append('<span><i clas="fa fa-chat"></i> Close Chat</span>');
createLogin();
$(this).removeClass('ph-chat-button').addClass('close-chat');
if($(this).hasClass('close-chat')){
$('.close-chat').click(function(){
$('.loginContainer').remove();
$(this).empty();
$(this).append('<span><i clas="fa fa-chat"></i> Chat Admin</span>');
chatbtn.toggleClass('close-chat ph-chat-button').parent().next().slideToggle();
});
}
});
$('.chat-login').on('submit',function(ev){
ev.preventDefault();
data = $(this).serialize();
console.log(data);
});
function createLogin(){
wrap.setAttribute('class','loginContainer animated bounceIn');
wrap.innerHTML = "<div class='box'>\
<div class='box-header'><div class='box-title'>Login</div></div>\
<div class='box-body'>\
<p class='help-block'> Enter your registered email address and click start chat to begin </p>\
<form method='post' action='chat.php' class='chat-login'>\
<div class='form-group col-md-12'>\
<label class='control-label'>Email</label>\
<input type='email' id='buyer_email' name='email' style='width:100%;margin-bottom:5%' class='form-control' placeholder='Email Address' required/>\
</div>\
<div class='text-center'><button class='btn btn-md btn-success btn'>Start Chat</button></div\
</form>\
<div class='js-alert-box'></div>\
</div></div>";
}
document.body.appendChild(wrap);
});
答案 0 :(得分:0)
尝试这种方法。
var _on = false; //global flag
$(document).ready(function(){
var chatbtn = $('.ph-chat-button');
chatbtn.on('click',function(ev){
ev.preventDefault();
_on = !_on;
if(_on){
// Open the chat
}else{
// Close the chat
}
});
});