javascript - 如何动态地将id赋予phonegap中的元素？

Question

嗨，我正在 phonegap 中做一个应用程序，在该应用程序中，我需要在列表视图中显示用户列表，其中包含个人资料图片、姓名、号码和在线状态。

for (var i = 0; i < roster_items.length; i++) {
    var jid_contact=roster_items[i].getAttribute('jid');
    var name_contact=roster_items[i].getAttribute('name');
    ///  Add all the contacts to  Array
        $('#contacts-listview').append(
                                       '<a href="#" onclick="user_contactsClicked('+ i + ');">' +
                                       '</br>'+
                                       '<div id="contact_img">'+
                                       '<img id="splash" src="images/contact_default_pic.png"  />'+
                                       '<ul id="menu">'+'<li id="contact">'+name_contact+'</li>'+
                                       '<li id="status">'+jid_contact+'</li>'+'</ul>'+
                                       '<div class="pull-right"><div><img id=i class="status_img" src="images/user_online.png"  /></div>'+
                                       '<div style="margin-bottom: 10px;"><ol id="date">'+
                                       '<li>date</li>'+
                                       '<li>time</li>'+
                                       '</ol></div></div>'+
                                       '</div>'+
                                       '</br>'+
                                       '</a>'
                    );
        }

我将调用一个函数来更改特定用户的在线状态并更改图像

changeOnlineStatus_contact : function(elementPos) {
    alert(elementPos);
    if(elementPos>=0) {
        //Get current table
        document.getElementById(i).src = "images/user_offline.png";
    }
}

为此，我想动态地给出 img 元素的 if。请给我建议。

提前致谢..

Answer 1

没有在图像上设置 id 的原因是因为你有：

"…<img id=i class=…"这意味着每个图像的 id 都是“i”

如果您将其更改为：

"…<img id=\""+i+"\" class=…"然后它将使用 的值i作为 id 属性

---

如果您对 UI 有更复杂的绑定，我建议您查看类似http://knockoutjs.com/的内容 - 这样您将更新底层模型，并且 html 将自动更新以表示它。