[英]jQuery attr using img src from object
My goal is to loop through a list of objects and display the image src and name in each column loop method but have been unsuccessful. 我的目标是遍历对象列表,并在每个列循环方法中显示图像src和名称,但未成功。 I have seen the attr("src", "image src") method but not used in a loop. 我已经看到过attr(“ src”,“ image src”)方法,但是没有在循环中使用。 I may also be using the wrong class in the html...Am I approaching this the right way? 我可能在html中使用了错误的类...我正以正确的方式进行操作吗? I am new to jQuery. 我是jQuery新手。 Thank you for any help. 感谢您的任何帮助。
HTML: 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: 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);
}
I believe you want to loop through the list of objects and display the image src and name in each column? 我相信您想遍历对象列表并在每列中显示图像src和名称?
Firstly, remove all the .col-lg-* in your HTML markup, as we should create this dynamically. 首先,删除HTML标记中的所有.col-lg- *,因为我们应该动态创建它。
Then, just loop through your object and create the relevant HTML objects that you want to append. 然后,只需遍历对象并创建要附加的相关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);
});
It seems your are trying to create an img tag 您似乎正在尝试创建img标签
Also img
is a self closing tag & a void element.you may not able to add text
to it. 另外img
是一个自闭标签和一个void元素。您可能无法向其中添加text
。 I guess you are looking for alt
property 我猜你在找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);
}
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/ https://jsfiddle.net/sunilsoma/p111hyk3/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.