如何使用JavaScript创建

我要创建使用JavaScript，在列表结构具有阵列可点击的div的列表是这样用的子项的div的可点击列表： -如何使用JavaScript创建

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

来源

2013-09-22 Sayak

您列出了很多你想要的东西，但被证明没有做出尝试，或你已经进行的研究。这恐怕不是Stack Overflow的工作原理，正如你的问题所表明的那样，现在看来，它似乎可能会被作为题外话闭幕。请花时间阅读[Stack Overflow Question check-list]（http://meta.stackexchange.com/questions/156810/stack-overflow-question-checklist）。 –

有点实验后，明白我在做什么错误，以及如何完成它。下面的代码： -

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-22 21:12:44 Sayak

尝试过这样的事情这是不是很努力！

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-22 17:18:06 Sayak

这里的数组在哪里？ – defau1t

如果你使用jQuery，然后再尝试这样的事：

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

这是可能的乱写jQuery的同样的事情，但需要的代码还行 - 我的输送在这里委派的想法（在JQuery网站上有很多现有的文档和例子，在这个网站上）。

NB：你在这个问题提交不能（不应该）具有相同ID的多个DOM元素的代码（这就是类是 - 对语义相似的元素）。此外，试图仿效使用div列表s，而不是li元素或许并不是最好的做法。

来源

2013-09-22 18:32:19 Debloper

如何使用JavaScript创建

回答

相关问题