javascript - 我的 Jquery CSS 不起作用

标签 javascript php jquery html css

所以我创建了这个网站，如果你用一个 onclick 事件处理一个 chat_generate 函数来按下某个 div。此函数插入​​到特定的 .open_div 中，基于 chat_generate() 函数的 id 的聊天 html 基于开始 div 的 onclick 中的内容，并从 mysql 数据库中获取聊天数据(与问题)。成功插入 html 后，将触发其他一些功能，例如通过 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+")'>&times;</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+")'>&#9776;</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' >&#xE5CD;</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 不起作用，它不显示在检查器中，控制台中也没有错误。错误和/或解决方案可能非常简单或困难，但我不知道。 任何帮助，将不胜感激。 感谢您的宝贵时间。

最佳答案

我不太确定是不是这种情况，在得到结果后调用 chat_enlarge_standard 方法。 Javascript 是异步的，在从 xhr 获取结果之前将调用 chat_enlarge_standard。

尝试像这样在 chat_generate 方法中改变调用 chat_enlarge_standard 的位置

 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+")'>&times;</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+")'>&#9776;</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' >&#xE5CD;</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();

                                  }

                      }
                     chat_enlarge_standard(chat_id); //PLACE HERE
              }




                  };

                  xmlhttp.open("GET", "receivechatinfo.php?id="+id, true);
                  xmlhttp.send();




  }else{

          alert("The chat is already open");
  }





  }

关于javascript - 我的 Jquery CSS 不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46370337/

上一篇：css - 在悬停时缩放一个圆圈，保持边框的宽度

下一篇：javascript - React.Js 和 Polymer CSS

相关文章：

javascript - React 文本区域意外失去焦点

php - 我如何在提交时显示错误并在页面上保留 DIV(特殊框)

javascript - parse_str 将下划线添加到索引并附加值

javascript - 如何使用 Angular 1.5 版本在 cookie 中存储和获取数组值

jquery - 删除不工作的类

javascript - 在 jQuery Animate 中获得位置

javascript - 如何在 Angular 中嵌套 routerLink

javascript - 如何在停用 WordPress 插件时调用 Java 脚本

php - 如何仅使用 yast 命令行在 SUSE 10.1 上将 PHP 5.1 升级到 5.2？

javascript - Twitter Bootstrap 安装问题

©2024 IT工具网  联系我们