0
所以我創建了這個網站的東西，如果你按下一個特定的div與一個onclick事件處理chat_generate函數。這個函數根據chat_generate（）函數的id，根據開始div的onclick中的內容插入到特定的.open_div中，用於聊天的html，並從mysql數據庫獲取聊天數據（與該數據庫無關問題）。當html成功插入後，會觸發一些其他函數，例如通過jquery的額外css值，這些函數不起作用。這裏是代碼：我的jquery css不工作
<link rel="stylesheet" type="text/css" href="/Log/home/styles/chat.css">
上述代碼行指的是一個專門用於聊天樣式的css文件。
<button class="chat_test_start_button" onclick="chat_generate(1)">Button</button>
<div class='open_chat'></div>
<div class='open_chat'></div>
<div class='open_chat'></div>
上面的主要HTML。
聊天生成函數執行其指定的作業：
function chat_generate(chat_id) {
var id = chat_id.toString();
var check_user_in = "#chat_"+id;
if($(check_user_in).length == 0) {
var open ="";
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var myObj = JSON.parse(this.responseText);
/*var text = "Welcome to chat: "+myObj[1];*/
open = [
"<div class='full_wrap' id='chat_"+chat_id+"'> <div class='force-overflow'></div> <div id='nav_"+chat_id+"' class='chat_side'> <h2>Chat Settings & Info</h2> <a id='closebtn' href='javascript:void(0)'",
"class='closebtn' onclick='chat_closeNav("+chat_id+")'>×</a> <div class='authr' style='background-image:url("+myObj[3]+");'> <a> <div class='authr_img' style='background-image:url(pimages/"+myObj[8]+");'></div> </a> <form action='mypage.php' method='post'> <div ",
"class='authr_name'><button value='"+myObj[6]+"' name='userlink' class='subm_as_text'> "+myObj[6]+"</button></div> </form> </div> <div class='chat_info'> <div ",
"class='chat_descy'> <h2>Chat Description</h2> <div class='descc'> <h3>"+myObj[2]+"</h3> </div> </div> <div class='chat_fol'><h2>Chat users: 2</h2></div> <div class='chat_back'> <h2> ",
"Change Chat Wallpaper</h2> <form method='post' action='picture.php' enctype='multipart/form-data'> <input type='file' id='upload' class='custom-file-input' name='chat_wall'> <input type='submit' ",
"class='chat_wall_subm' value='Change'/> </form> </div> </div> <form method='post' action='chat.php' > <button class='chat_leave' name='chat_leave' value='$chat_index' >Leave Chat</button> </form> </div> <div class='chat_mnav'> ",
"<span onclick='chat_openNav("+chat_id+")'>☰</span> <i class='material-icons' id='chat_un_small' onclick='chat_un_small("+chat_id+")'>arrow_upward</i> <h1>"+myObj[1]+"</h1> <div class='chat_close' onclick='chat_close("+chat_id+")'><i ",
"class='material-icons' ></i></div> </div> <div class='conceal_wrapper'> <div class='msgs' style='background-image:url("+myObj[4]+")' id='"+chat_id+"'> </div> <form method='post' id='form_"+chat_id+"' class='comform'> <div class='chat_wcom' > <input maxlength='140' type = 'text' id='input_"+chat_id+"' class='comin' placeholder='My message...' name='sendmsg' onkeypress='g(event,"+chat_id+")' ",
"autocapitalize='off' autocorrect='off' /> <input class='hidden_index' type='text' value='"+chat_id+"' name='chat_index'/> </div> </form> </div> <div class='chat_enlarge'> <div class='chat_enlarge_full' onmouseover='chat_action(this)' onmouseout='chat_action_negative(this)' ",
"onclick='chat_enlarge_full("+chat_id+")'></div> <div class='chat_enlarge_standard' onmouseover='chat_action(this)' onmouseout='chat_action_negative(this)' onclick='chat_enlarge_standard("+chat_id+")'></div> <div ",
"class='chat_enlarge_small' onmouseover='chat_action(this)' onmouseout='chat_action_negative(this)' onclick='chat_enlarge_small("+chat_id+")'></div><div class='chat_enlarge_close' onmouseover='chat_action(this)' onmouseout='chat_action_negative(this)' onclick='chat_close("+chat_id+")'></div> </div></div>"
].join("\n");
var cusid_ele = document.getElementsByClassName('open_chat');
if(cusid_ele.length == 0){
alert("No more chat space");
}else{
if($(cusid_ele[0]).replaceWith(open)){
draggables();
startf();
}
}
}
};
xmlhttp.open("GET", "receivechatinfo.php?id="+id, true);
xmlhttp.send();
chat_enlarge_standard(chat_id);
}else{
alert("The chat is already open");
}
}
有問題的功能：
function chat_enlarge_standard(chat_id){
var item_id = "chat_"+chat_id.toString();
console.log("#"+item_id+" .chat_mnav h1");
$("#"+item_id+" .chat_close").css("display","inline-block");
$("#"+item_id+" .comstandin").css("margin-top","20%");
$("#"+item_id+" .chat_leave").css("width","70%");
// $("#"+item_id+" .chat_leave").css("margin-left","15%");
$("#"+item_id+" .chat_mnav span").css("padding","0");
$("#"+item_id+" .chat_side a:nth-child(2)").css({"padding":"15px"});
$("#"+item_id+" .chat_mnav").css("height","10%");
$("#"+item_id+" .chat_mnav h1").css("padding","5% 0px 5% 5%");
$("#"+item_id+" .chat_mnav span").css({
"padding": "5%",
"padding-left": "0",
"padding-top":"3%",
"width":"5%"
});
$("#"+item_id+" .chat_side").css({"width":"100%","height":"90%"});
$("#"+item_id+" .chat_mnav h1").css("width","75%");
$("#"+item_id+" .chat_enlarge_close").css("display","none");
$("#"+item_id+" .chat_enlarge_small").css("display","block");
$("#"+item_id+" .comin").css("width","auto");
const mq = window.matchMedia("(min-width: 1025px)");
if (mq.matches) {
$("#"+item_id).css({"width":"25%","height":"75.6%","right":"auto"});
$("#"+item_id+" .msgs").css({"width":"25%","height":"58%"});
$("#"+item_id+" .chat_wcom").css("width","25%");
$("#"+item_id+" .chat_comstandin").css("margin-top","13%");
}else {
$("#"+item_id).css({"width":"37%","height":"75.6%","right":"auto"});
$("#"+item_id+" .msgs").css({"width":"37%","height":"58%"});
$("#"+item_id+" .chat_wcom").css("width","37%");
$("#"+item_id+" .chat_comstandin").css("margin-top","13%");
}
console.log("s_1");
}
這裏，jQuery的CSS不起作用，它不會在檢查顯示和控制檯中沒有錯誤。錯誤和/或解決方案可能非常簡單或困難，但我不知道。 任何幫助，將不勝感激。 謝謝你的時間。
**爾加！**你爲什麼這樣做它的位置？把你的CSS放在一個'.css'文件的某個地方，然後用jQuery來應用/刪除這個類。 – ceejayoz
http://www.codeconquest.com/dont-mix-html-css-javascript/ – bassxzero
更好地使用jQuery的CSS功能是當你想在頁面加載後進行更改。 – NutellaAddict