jQuery attr unter Verwendung von img src von Objekt

Question

Mein Ziel ist es, durch eine Liste von Objekten durchlaufen und zeigen Sie das Bild src und Name in jeder Spalte Loop-Methode, aber waren nicht erfolgreich. Ich habe die Methode attr ("src", "image src") gesehen, aber nicht in einer Schleife verwendet. Ich kann auch die falsche Klasse in der HTML verwenden ... Bin ich das richtig? Ich bin neu bei jQuery. Danke für jede Hilfe.

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

Ich glaube, Sie durch die Liste der Objekte Schleife wollen und das Bild src und Namen in jeder Spalte angezeigt?

Erstens, entfernen Sie alle. Col-lg- * in Ihrem HTML-Markup, wie wir dies dynamisch erstellen sollten.

Dann durchlaufen Sie einfach Ihr Objekt und erstellen Sie die relevanten HTML-Objekte, die Sie anhängen möchten.

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

Es scheint, Ihr versuchen, ein img Tag

Auch img ist ein Schließselbst Tag erstellen & eine Lücke element.you nicht in der Lage kann text, um es hinzuzufügen. Ich glaube, Sie suchen alt Eigenschaft

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/