给img标签动态设置src属性,不生效
js如下:
for(var i = 0; i<len;i++){
var data = datas[i];
var nickname = data.nickname;
var avatar = data.avatar;
var li_item = '';
if(avatar == null){
// 只显示nickname
li_item = '<li>'+
'<span class="lottery_name">' + nickname + '</span>'+
'</li>';
}else{
li_item = '<li>'+
'<img class="lottery_icon" id="img'+i+'" />'+
'<span class="lottery_name">' + nickname + '</span>'+
'</li>';
$('#img'+i).attr('src',avatar);
}
$('.lottery_main').append(li_item);
}
问题:如 $('#img'+i).attr('src',avatar),给每个动态生成的img标签添加属性src,但是在显示效果的时候,不能获取到给图片 的 地址。
原因:在js里面是先动态生成li标签,在改li还没有添加到DOM之前,就通过获取页面中的节点的方法去取DOM节点($('#img'+i)),所以按照上面红色代码的写法是不生效的,即设置的属性没有生效。
解决方法:
1、直接在动态生成img中设置属性:
'<img class="lottery_icon" id="img'+i+'" src="'+avatar+'"/>
for(var i = 0; i<len;i++){
var data = datas[i];
var nickname = data.nickname;
var avatar = data.avatar;
var li_item = '';
if(avatar == null){
// 只显示nickname
li_item = '<li>'+
'<span class="lottery_name">' + nickname + '</span>'+
'</li>';
}else{
li_item = '<li>'+
'<img class="lottery_icon" id="img'+i+'" src="'+avatar+'"/>'+
'<span class="lottery_name">' + nickname + '</span>'+
'</li>';
//$('#img'+i).attr('src',avatar);
}
$('.lottery_main').append(li_item);
}
2、在将li标签添加到DOM中之后,在设置img的src:
将语句 $('#img'+i).attr('src',avatar);的顺序换一下
for(var i = 0; i<len;i++){
var data = datas[i];
var nickname = data.nickname;
var avatar = data.avatar;
var li_item = '';
if(avatar == null){
// 只显示nickname
li_item = '<li>'+
'<span class="lottery_name">' + nickname + '</span>'+
'</li>';
}else{
li_item = '<li>'+
'<img class="lottery_icon" id="img'+i+'" />'+
'<span class="lottery_name">' + nickname + '</span>'+
'</li>';
//$('#img'+i).attr('src',avatar);
}
$('.lottery_main').append(li_item);
$('#img'+i).attr('src',avatar);
}