0

我想使用 Javascript 从数组中创建一个可点击的 div 列表，其中列表结构必须是这样的：-

<div id="outerContainer">
  <div id="listContainer">

    <div id="listElement">
      <div id="itemId"> </div>
      <div id="itemTitle"> </div>
      <div id="itemStatus"> </div>
    </div>

    <div id="listElement">
      <div id="itemId"> </div>
      <div id="itemTitle"> </div>
      <div id="itemStatus"> </div>
    </div>

  </div>
</div>

我想分别从三个数组 itemIdData[ ]、itemTitleData[ ] 和 itemStatusData[ ] 中提取 itemId、itemTitle 和 itemStatus 的值，以创建整个列表。

此外，当我单击任何 listElements 时，我想要一个显示 itemId 的警报。谁能帮我解决这个问题。

4

3 回答 3

3

如果您使用的是 jQuery，请尝试以下操作：

$("#listContainer").on("click", "div", function () {
    console.log("jQuery Event Delegation");
    alert($(this).find(">:first-child").attr("id"));
});

不用 jQuery 也可以写同样的东西，但需要更多的代码行——我在这里传达委托的想法（在 JQuery 站点上有大量现有的文档和示例，在这个站点上也有）。

注意：您在问题中提交的代码不能（不应该）有多个具有相同 ID 的 DOM 元素（这就是类的用途 - 对于语义相似的元素）。此外，尝试使用divs 而不是li元素来模拟列表可能不是最佳实践。

于 2013-09-22T18:32:19.250 回答
2

经过一些实验，了解我做错了什么以及如何完成它。这是代码： -

    var listContainer = document.createElement("div");
    document.getElementById("outerContainer").appendChild(listContainer);

    for (var i = 0; i < json.length; i++) {

        //create the element container and attach it to listContainer.
        var listElement = document.createElement("div");
        listElement.id = i;
        listElement.className = "listItemContainer";
        listElement.addEventListener("click", function(e){
            var itemId = e.target.children[1].innerHTML;
            alert(itemId);
        });
        listContainer.appendChild(listElement);

        //create and attach the subchilds for listElement.

        var itemTitle = document.createElement("span");
        itemTitle.innerHTML = postTitleData[i];
        itemTitle.id = 'title'+i;
        itemTitle.className = "itemTitle";
        listElement.appendChild(itemTitle);

        var itemId = document.createElement("div");
        itemId.innerHTML = postIdData[i];
        itemId.id = 'id'+i;
        itemId.className = "itemId";
        listElement.appendChild(itemId);

        var itemStatus = document.createElement("span");
        itemStatus.innerHTML = postStatusData[i];
        itemStatus.id = 'status'+i;
        itemStatus.className = "itemStatus";
        listElement.appendChild(itemStatus);
    }
于 2013-09-22T21:12:44.807 回答
1

尝试过这样的东西，但不太奏效！

var listContainer = document.createElement("div");
document.getElementById("outerContainer").appendChild(listContainer);
var listElement = document.createElement("div");
listContainer.appendChild(listElement);
listElement.className = "listItemContainer";

for (var i = 0; i < json.length; i++) {

            var itemId = document.createElement("div");
            itemId.innerHTML = idData[i];
            listElement.appendChild(itemId);
            itemId.className = "itemId";

            var itemTitle = document.createElement("div");
            itemTitle.innerHTML = titleData[i];
            listElement.appendChild(itemTitle);
            itemTitle.className = "itemTitle";

            var itemStatus = document.createElement("div");
            itemStatus.innerHTML = statusData[i];
            listElement.appendChild(itemStatus);
            itemStatus.className = "itemStatus";

            listElement.appendChild(document.createElement("hr"));

            var elementId = 'ListElement'+i;
            listElement.id = elementId;

            listElement.addEventListener("click", function(){
                alert(document.getElementById(elementId).innerHTML);
            });
}
于 2013-09-22T17:18:06.363 回答