jQuery 使用来自对象的 img src 的 attr

Question

我的目标是遍历对象列表并在每个列循环方法中显示图像 src 和名称但未成功。我见过 attr("src", "image src") 方法但没有在循环中使用。我也可能在 html 中使用了错误的 class...我的方法是否正确？我是 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/

jQuery 使用来自对象的 img src 的 attr

jQuery attr using img src from object

javascript

jquery

for-loop

attr