객체의 img src를 사용하는 jQuery attr

Question

내 목표는 객체 목록을 순환하여 각 열 루프 메소드에 이미지 src와 name을 표시하지만 실패했습니다. attr ("src", "image src") 메서드를 보았지만 루프에서는 사용되지 않았습니다. 나는 또한 html로 잘못된 클래스를 사용하고 있을지도 모른다. 나는 이것을 올바른 방법으로 접근하고 있는가? jQuery를 처음 사용합니다. 어떤 도움을 주셔서 감사합니다.

HTML :

<div class="container" style="max-width:800px;"> 
      <h2 align="center" id="character-text">Choose your character:</h2> 
      <div class="row" id="charOptions" style="max-width:800px;" align="center"> 
       <div class="col-lg-3 char-img"></div> 
       <div class="col-lg-3 char-img"></div> 
       <div class="col-lg-3 char-img"></div> 
       <div class="col-lg-3 char-img"></div> 
      </div> 

JS :

//Objects 
var hansolo = { 
    name: "Han Solo", 
    attack: 10, 
    hp: 20, 
    counter: 0, 
    src: "assets/images/hansolo.jpg", 
} 

var chewy = { 
    name: "Chewy", 
    attack: 10, 
    hp: 20, 
    counter: 0, 
    src: "assets/images/chewy.jpg", 
} 

var jabba = { 
    name: "Jabba", 
    attack: 10, 
    hp: 20, 
    counter: 0, 
    src: "assets/images/jabba.jpg", 
} 

var greedo = { 
    name: "Greedo", 
    attack: 10, 
    hp: 20, 
    counter: 0, 
    src: "assets/images/greedo.jpg", 
} 

var choices = [hansolo, chewy, jabba, greedo]; 

for (var i = 0; i < choices.length; i++) { 
    var charOptions = $("<charOptions>"); 
    charOptions 
     .addClass("char-img char-text") 
     .attr("src", choices[i].src) 
     .text(choices[i].name);   
    $(".charOptions").append(charOptions); 
    console.log(charOptions); 
} 

Answer 1

나는 개체의 목록을 당신이 반복하고 싶은 생각과 각 열에있는 이미지 SRC와 이름을 표시?

먼저 HTML 마크 업에서 .col-lg- *를 모두 제거해야합니다.이 코드는 동적으로 만들어야합니다.

그런 다음 객체를 반복하여 추가하려는 관련 HTML 객체를 만드십시오.

var charOptionsRow = $('#charOptions'); 
$.each(choices, function(index, choice) { 
    // Create a new div.col-lg-3 to be appended to row. 
    var charOptionCol = $('<div>') 
    .addClass('char-option col-lg-3'); 

    // Append image to col. 
    var charImg = $('<img>') 
    .addClass('char-img') 
    .attr('src', choice.src); 
    charOptionCol.append(charImg); 

    // Append text to col. 
    var charText = $('<h5>') 
    .addClass('char-text') 
    .text(choice.name); 
    charOptionCol.append(charText); 

    // Append column to row. 
    charOptionsRow.append(charOptionCol); 
}); 

Answer 2

당신이 img 태그

또한 img를 만들려고 보인다는 자체 닫는 태그 & element.you 그것에 text을 추가 할 수 없습니다 수있는 무효입니다. 난 당신이 alt 재산

for (var i = 0; i < choices.length; i++) { tag 
    // creating img 
    var charOptions = $("<img>"); 
    charOptions 
     .addClass("char-img char-text") 
     .attr("src", choices[i].src) 
     .alt(choices[i].name);  
    // use id selector since there is no dom with class charOptions 
    $("#charOptions").append(charOptions); 
    console.log(charOptions); 
} 

Answer 3

jquery 

//Objects 
var hansolo = { 
name: "Han Solo", 
attack: 10, 
hp: 20, 
counter: 0, 
src: "assets/images/hansolo.jpg", 
} 

var chewy = { 
name: "Chewy", 
attack: 10, 
hp: 20, 
counter: 0, 
src: "assets/images/chewy.jpg", 
} 

var jabba = { 
name: "Jabba", 
attack: 10, 
hp: 20, 
counter: 0, 
src: "assets/images/jabba.jpg", 
} 

var greedo = { 
name: "Greedo", 
attack: 10, 
hp: 20, 
counter: 0, 
src: "assets/images/greedo.jpg", 
} 

var choices = [hansolo, chewy, jabba, greedo]; 

$(choices).each(function(){ 
     console.log(this.src); 
     var div = "<div class='col-lg-3 char-img'><img 
src="+this.src+" /></div>" 
     $('#charOptions').append(div); 
}); 







html 

<div class="container" style="max-width:800px;"> 
     <h2 align="center" id="character-text">Choose your character: 
</h2> 
     <div class="row" id="charOptions" style="max-width:800px;" align="center"> 
      <div class="col-lg-3 char-img" style="width:800px; color:red;" >a</div> 
      <div class="col-lg-3 char-img">b</div> 
      <div class="col-lg-3 char-img">c</div> 
      <div class="col-lg-3 char-img">d</div> 
     </div> 

https://jsfiddle.net/sunilsoma/p111hyk3/