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와 관련된 경우 - 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>

- 당신은 당신의 img의 style 속성을 닫습니다 놓친