Как создать кликабельный список div с подпунктами, используя JavaScript

Question

Как создать кликабельный список div с подпунктами, используя JavaScript

0

Я хочу создать список интерактивных divs из массивов с использованием 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>

Я хочу извлечь значения itemId, itemTitle и itemStatus из трех массивов itemIdData [], itemTitleData [] и itemStatusData [] соответственно, чтобы создать весь список.

Кроме того, когда я нажимаю на любой из элементов списка, я хочу получить предупреждение, показывающее itemId. Может ли кто-нибудь помочь мне с этой проблемой.

Sayak 22 сен. 2013, в 19:17

Источник

Теги:

javascript

jquery

html

3 ответа

3

Если вы используете jQuery, попробуйте что-то вроде этого:

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

Можно написать одно и то же без jQuery, но возьмем дальнейшие строки кода - я передаю идею делегации здесь (на сайте JQuery есть обширные существующие документы и примеры, и здесь, на этом сайте).

NB: код, который вы отправили в вопросе, не может (не должен) иметь несколько элементов DOM с одинаковыми идентификаторами (для которых предназначены классы - для семантически похожих элементов). Кроме того, попытка эмулировать список с использованием div вместо элементов li пожалуй, не самая лучшая практика.

Debloper 22 сен. 2013, в 16:52

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

Sayak 22 сен. 2013, в 15:30

0

где Массив здесь?
defau1t 22 сен. 2013, в 18:37

Ещё вопросы

Sayak · Accepted Answer · 2013-09-22T20-08-00.000Z

После небольшого эксперимента, понял, что я делаю неправильно, и как это сделать. Вот код: -

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