我試圖使用jQuery動態地將用戶添加到頁面上不知道爲什麼它不工作

Question

我試圖用jQuery動態地添加用戶到頁面上，每個用戶都必須以某種方式設置樣式，不知道我在做什麼錯誤的，關於如何更好的做出任何建議，或者如果你能看到發生了什麼問題，請讓我知道謝謝。

var user = [ 
 
{ 
 
    avatar: "http://static2.businessinsider.com/image/5899ffcf6e09a897008b5c04-1200/.jpg", 
 
    username: "Alex", 
 
    position: "dev", 
 
    active: "active", 
 
    lastLogin: 2017 
 
} 
 
]; 
 

 
function addUser(index, user) { 
 
    var avatar = user.avatar; 
 
    var username = user.username; 
 
    var position = user.position; 
 
    var active = user.active; 
 
    var lastLogin = user.lastLogin; 
 

 
    var $user = 
 
     "<div class='col-sm-3'>" + 
 
     "<img class='img-circle avatar' style='width: 120px" +  
 
     "src='" + 
 
     avatar + "'" + "/>" + 
 
     "<h4 style='margin-bottom: -10px;'>" + username + "</h4>" + 
 
     "<h5 style='margin-bottom: -10px;'>" + position + "</h5>" + 
 
     "<h5 style='margin-bottom: -7px;'>" + active + "</h5>"+ 
 
     "<h5 style='margin-bottom: -7px;'>" + lastLogin + "</h5>" + 
 
     "<button style='margin-top: 20px'>Edit</button>" + 
 
     "</div>" 
 

 
    $("#col-centered").append($user); 
 
} 
 

 
$.each(user, addUser);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="col-centered" class="container-fluid row"> 
 

 
</div>

Answer 1

如果問題涉及到未顯示的img - 你已經錯過了，收你的img的style屬性 - style='width: 120px"

var user = [ 
 
{ 
 
    avatar: "http://static2.businessinsider.com/image/5899ffcf6e09a897008b5c04-1200/.jpg", 
 
    username: "Alex", 
 
    position: "dev", 
 
    active: "active", 
 
    lastLogin: 2017 
 
}]; 
 

 
function addUser(index, user) { 
 
    var avatar = user.avatar; 
 
    var username = user.username; 
 
    var position = user.position; 
 
    var active = user.active; 
 
    var lastLogin = user.lastLogin; 
 

 
    var $user = 
 
     "<div class='col-sm-3'>" + 
 
     "<img class='img-circle avatar' style='width: 120px'" +  
 
     "src='" + 
 
     avatar + "'" + "/>" + 
 
     "<h4 style='margin-bottom: -10px;'>" + username + "</h4>" + 
 
     "<h5 style='margin-bottom: -10px;'>" + position + "</h5>" + 
 
     "<h5 style='margin-bottom: -7px;'>" + active + "</h5>"+ 
 
     "<h5 style='margin-bottom: -7px;'>" + lastLogin + "</h5>" + 
 
     "<button style='margin-top: 20px'>Edit</button>" + 
 
     "</div>" 
 

 
    $("#col-centered").append($user); 
 
} 
 

 
$.each(user, addUser);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="col-centered" class="container-fluid row"> 
 

 
</div>