javascript 调用新数据时createElement()不更改数据的问题

ldioqlga  于 2023-01-19  发布在  Java
关注(0)|答案(1)|浏览(128)

当我按下div“用户”给我这个用户的帖子，但当我改变到另一个用户强制删除自动为旧用户的帖子，并给我一个新用户的帖子，不幸的是，它显示新用户的帖子底部的旧用户的帖子。
删除旧的职位，并给我带来新的职位上相同的部门。
此函数用于创建元素帖子：

function getPost(userID){
         fetch('https://jsonplaceholder.typicode.com/posts?userId='+ userID)
         .then((response) =>{
            if (response.ok) {
               return response.json() 
            }
         
         })
         .then((posts) => {
            for(let post of posts){
               const parentPosts = document.querySelector(".infos")
               const orginalPost = document.querySelector("#demo")
               console.log(orginalPost);
               // orginalPost.style.display="none";
            //     //orginalPost.innerHTML='';  
                let newPost = document.createElement('div')
                newPost.innerHTML = orginalPost.innerHTML;
                newPost.classList.remove("orginal")
                newPost.className = 'info';
            // //    //console.log('new post ',newPost);
                let postHead = document.querySelector(".postHead")
                let postP = document.querySelector(".postP")
                     postHead.innerHTML = post.title;
                     postP.innerHTML = post.body;
            // //    //const parentPosts = document.querySelector(".infos")
                     parentPosts.appendChild(newPost)
                    remove(parentPosts)
            }
                         return
         });
      }

这个功能应该是工作的删除旧职位

function remove(element) {
         let elementLength = element.children.length;
         console.log("element.children.length >> "+elementLength)
         if (element > 0) {
            element.firstChild.remove()
            //element.removeChild(element.lastChild);
            console.log("element.children.length from loop >> "+ elementLength)
}
  }

这些都是代码

<html>
   <head>
      <style>
body{
   background: linear-gradient(120DEG,#c0a397,#ebe6b4);
}
         .conterner{
         width: 100%;
         display: flex;
         flex-direction: row;
         }
         .users{
            margin: 2px;
            background: white;
            width: 30%;
            height: 100%;
         }
         .infos{
            margin: 2px;
            background: white;
            width: 70%;
         }
         .user{
            border-radius: 65px;
            background-color: rgba(187, 200, 200, 0.315);
            margin: 0 auto;
            cursor: pointer;
         }

         .user:hover,
         :active{
            border: rgb(224, 152, 132) 2px solid;
         }
         h3{
            padding: 1px;
            margin-left: 25px;
         }
         .info{
            border-radius: 23px;
            background-color: rgba(187, 200, 200, 0.331);
            margin: 8px;
            padding: 2px ;
            padding-left: 20px;
         }
         .line{
            width: 97%;
            margin:0;
            padding: 0;
            border-bottom: 1px solid black;
            /* position: relative; */
            }
            .dispaly{
               display: none;
            }
            .orginal{
               display: none;
            }
      </style>
   </head>

   <body>
      <main>
         <div class="conterner">

            <div class="users " >
               <div style="margin: 0 a;" id="parUser">
                  <div class="user" id="user" >
                     <h3 id="name"> Ahmed </h3>
                     <h3 id="email"> Ahmed.ali@gmail.com </h3>
                  </div>
               </div>
                
            </div>
            <div class="info orginal" id="demo">
               <h5 class="postHead" > post post postpost</h5>
               <div class="line"></div>
               <p class="postP"> post post postpost</p>
            </div>
            
            <div class="infos">
               <div class="info">
                  <h5 class="postHead" > post post postpost</h5>
                  <div class="line"></div>
                  <p class="postP"> post post postpost</p>
               </div>
            </div>
         </div>
        
      </main>
      <script>
         

         function getUsers(userID){

       fetch('https://jsonplaceholder.typicode.com/users')
         .then((response) =>{
            if (response.ok) {
               return response.json() 
            }
         
         })
         .then((users) => {
            for(let user of users){
               // console.log(user)
               const orginalDiv = document.querySelector("#user");
               orginalDiv.style.display ='none';
               const newDiv = document.createElement('div')
               newDiv.innerHTML= orginalDiv.innerHTML;
               newDiv.className="user";
               const nameH = document.querySelector('#name')
               nameH.innerHTML = user.name;
               const emailH = document.querySelector('#email')
               emailH.innerHTML = user.email;
               const parentDiv = document.getElementById("parUser")
               parentDiv.appendChild(newDiv);
               console.log(newDiv);
               newDiv.addEventListener("click", ()=>userEvent(user.id)) 
               console.log(user.id)
               const parentPosts = document.querySelector(".infos")
            }
            
                     return
         })
        // orderElement(user)
      }
      function getPost(userID){
         fetch('https://jsonplaceholder.typicode.com/posts?userId='+ userID)
         .then((response) =>{
            if (response.ok) {
               return response.json() 
            }
         
         })
         .then((posts) => {
            for(let post of posts){
               const parentPosts = document.querySelector(".infos")
               const orginalPost = document.querySelector("#demo")
               console.log(orginalPost);
               // orginalPost.style.display="none";
            //     //orginalPost.innerHTML='';  
                let newPost = document.createElement('div')
                newPost.innerHTML = orginalPost.innerHTML;
                newPost.classList.remove("orginal")
                newPost.className = 'info';
            // //    //console.log('new post ',newPost);
                let postHead = document.querySelector(".postHead")
                let postP = document.querySelector(".postP")
                     postHead.innerHTML = post.title;
                     postP.innerHTML = post.body;
            // //    //const parentPosts = document.querySelector(".infos")
                     parentPosts.appendChild(newPost)
                    remove(parentPosts)
            }
                         return
         });
      }
      
      function remove(element) {
         let elementLength = element.children.length;
         console.log("element.children.length >> "+elementLength)
         if (element > 0) {
            element.firstChild.remove()
            //element.removeChild(element.lastChild);
            console.log("element.children.length from loop >> "+ elementLength)
}
  }
     getUsers()
      
     getPost()

      function userEvent(id) {
         getPost(id);
        
      }

      </script>
      
   </body>
</html>
JavaScript

1条答案

按热度按时间
ghg1uchk

ghg1uchk1#

这个功能应该是工作的删除旧职位
函数remove包含以下块：

if(element > 0){
    element.firstChild.remove()
    console.log("element.children.length from loop >> "+ elementLength)
}

假设element很可能是HTMLElement，那么它永远不会是true，即使它是null。

console.log(null > 0)
console.log(document.createElement('div') > 0)

您应该使用长度变量elementLength，它是您之前准备好的，包含一个整数：

if(elementLength > 0){
    element.firstChild.remove()
    console.log("element.children.length from loop >> "+ elementLength)
}

虽然这就总结了为什么您的元素从未被删除，但我建议在添加newPost之前删除parentPosts的内容。

/***
* Removes all children from element
*/
function remove(element){
  if(element){
    while(element.firstChild) element.firstChild.remove()
  }

  /*
  let elementLength = element.children.length;
  console.log("element.children.length >> "+elementLength)
  if (element > 0) {
    element.firstChild.remove()
    console.log("element.children.length from loop >> "+ elementLength)
  }
  */
}

这里是一个调整后的片段。

function getUsers(userID){
  fetch('https://jsonplaceholder.typicode.com/users')
   .then((response) => {
      if(response.ok){
         return response.json() 
      }
   })
   .then((users) => {
      for(let user of users){
         // console.log(user)
         const orginalDiv = document.querySelector("#user");
         orginalDiv.style.display ='none';
         
         const newDiv = document.createElement('div')
         newDiv.innerHTML= orginalDiv.innerHTML;
         newDiv.className="user";
         newDiv.addEventListener("click", () => userEvent(user.id)) ;
         
         const nameH = document.querySelector('#name')
         nameH.innerHTML = user.name;
         
         const emailH = document.querySelector('#email')
         emailH.innerHTML = user.email;
         
         const parentDiv = document.getElementById("parUser")
         parentDiv.appendChild(newDiv);
                  
         //REM: Not required
         //console.log(newDiv);
         //console.log(user.id)
         //const parentPosts = document.querySelector(".infos")
      }

  return
 })
};

function getPost(userID){
  fetch('https://jsonplaceholder.typicode.com/posts?userId='+ userID)
  .then((response) => {
    if(response.ok){
       return response.json() 
    }
 })
 .then((posts) => {
    //REM: These wont change inside the loop
    const orginalPost = document.querySelector("#demo");
    const parentPosts = document.querySelector(".infos");
 
    //REM: Clear the current content
    remove(parentPosts);

    //REM: Add new content
    for(let post of posts){
      //console.log(orginalPost);

      const newPost = document.createElement('div');
      newPost.innerHTML = orginalPost.innerHTML;
      
      //REM: Setting className below, removed all other classes anyway
      //newPost.classList.remove("orginal")
      newPost.className = 'info';

      const postHead = newPost.querySelector(".postHead");
      postHead.innerHTML = post.title;
      
      const postP = newPost.querySelector(".postP");
      postP.innerHTML = post.body;
      
      parentPosts.appendChild(newPost)
    };
    
    return
  })
};

function remove(element){
  if(element){
    while(element.firstChild) element.firstChild.remove()
  }
};

function userEvent(id){
  getPost(id);
};

getUsers()
getPost()
body{
  background: linear-gradient(120DEG,#c0a397,#ebe6b4);
}
.conterner{
  width: 100%;
  display: flex;
  flex-direction: row;
}
.users{
  margin: 2px;
  background: white;
  width: 30%;
  height: 100%;
}
.infos{
  margin: 2px;
  background: white;
  width: 70%;
}
.user{
  border-radius: 65px;
  background-color: rgba(187, 200, 200, 0.315);
  margin: 0 auto;
  cursor: pointer;
}

.user:hover,
:active{
  border: rgb(224, 152, 132) 2px solid;
}
h3{
  padding: 1px;
  margin-left: 25px;
}
.info{
  border-radius: 23px;
  background-color: rgba(187, 200, 200, 0.331);
  margin: 8px;
  padding: 2px ;
  padding-left: 20px;
}
.line{
  width: 97%;
  margin:0;
  padding: 0;
  border-bottom: 1px solid black;
  /* position: relative; */
  }
  .dispaly{
     display: none;
  }
  .orginal{
     display: none;
  }
<main>
   <div class="conterner">
      <div class="users " >
         <div style="margin: 0 a;" id="parUser">
            <div class="user" id="user" >
               <h3 id="name"> Ahmed </h3>
               <h3 id="email"> Ahmed.ali@gmail.com </h3>
            </div>
         </div>
      </div>
      
      <div class="info orginal" id="demo">
         <h5 class="postHead" > post post postpost</h5>
         <div class="line"></div>
         <p class="postP"> post post postpost</p>
      </div>

      <div class="infos">
         <div class="info">
            <h5 class="postHead" > post post postpost</h5>
            <div class="line"></div>
            <p class="postP"> post post postpost</p>
         </div>
      </div>
   </div>
</main>
赞(0）分享  回复(0）举报  2023-01-19
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com