Question

我想使用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的警报。任何人都可以帮我解决这个问题。

Answer 1

如果你正在使用jQuery，那么尝试这样的事情：

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

可以在没有jQuery的情况下编写相同的东西，但是会采用更多的代码行 - 我在这里传达了委托的想法（在JQuery站点上有大量现有的文档和示例，并且在此站点上）。

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

Answer 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);
    }

Answer 3

尝试过这样的事情并不是很有效！

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);
            });
}

如何使用JavaScript创建包含子项的div的可单击列表

3 个答案: