如何在单击时创建列表

how to create list onClick

本文关键字：创建 列表 单击      更新时间：2023-09-26

我试图创建UL视图的列表，并为它们添加一个特定的onclick函数。这是我的代码：

function createList(divName) {
  var divName = document.getElementById(divName);
  for (var i in myListOfObjects) {
    // create an arbitrary ul element
    var ul = document.createElement('ul');
    var s = myListOfObjects[i]; //get specific object (JSON object)
    var subject = document.createElement('li'),
      subjectContent = document.createTextNode("someText"); // subject
    subject.appendChild(subjectContent);
    ul.appendChild(subject);
    ul.onclick = function() {
      //pass  the specific TEXT from the specific JSON object to the next page.
      window.location.href = "NewPage.html" +
        "?specificText=" + JSON.stringify(s);
    };
    // append the created ul element above to the  div element                
    div.appendChild(ul);
  }
}

我的问题是：当我运行该函数时，单击函数为"MyListOfObjects"中的所有对象获取相同的"TEXT"（文本是最后一个对象的文本，意味着最后一个物体覆盖了第一个），我检查了这个列表中的文本值不相同，所以我怎么知道是什么导致了这个问题呢？以及如何解决这个问题。

谢谢！

因此，我站不住脚，您需要一个UL标签，该标签内部有基于指定对象列表（myObjectList）的li标签。当你点击每个li时，你的页面会根据对象重定向到指定的页面。试用代码：

var myListOfObjects = [
        {'TEXT': 'a1', 'ID': 0},
        {'TEXT': 'a3', 'ID': 1},
        {'TEXT': 'a2', 'ID': 2}
    ];//sample object list
    function createList(divName) {
        var div = document.getElementById(divName);
        // a ul element has many li elements.
        //this line out of for-loop. only one ul is enough.
        var ul = document.createElement('ul');
        var i = 0;//counter of
        for (var objId in myListOfObjects) {
            var obj = myListOfObjects[objId];
            var subject = document.createElement('li');
            subjectContent = document.createTextNode("someText"); // subject
            subject.id = 'li_' + i;
            subject.setAttribute('myId', i);// specified related object
            subject.appendChild(subjectContent);
            subject.onclick = function (event) {
                var index = this.getAttribute('myId');
                obj = myListOfObjects[index];
                loc = "NewPage.html" + "?specificText=" + JSON.stringify(obj['TEXT']);
                window.location.href = loc;
                //remove comment to test
                alert(loc);
            };
            ul.appendChild(subject);
            i++;
        }
        div.appendChild(ul);
    }

首先，创建一个div DOM对象，但将其分配给变量divName。然后，稍后使用从未赋值的变量div。

试试这个：

function createList(divName) {
  var div = document.getElementById(divName);
  for (var i in myListOfObjects) {
    // create an arbitrary ul element
    var ul = document.createElement('ul');
    var s = myListOfObjects[i]; //get specific object (JSON object)
    var subject = document.createElement('li'),
      subjectContent = document.createTextNode(s); // subject
    subject.appendChild(subjectContent);
    ul.appendChild(subject);
    ul.onclick = function() {
      //pass  the specific TEXT from the specific JSON object to the next page.
      window.location.href = "NewPage.html" +
        "?specificText=" + JSON.stringify(s["TEXT"]);
    };
    // append the created ul element above to the  div element                
    div.appendChild(ul);
  }
}
相关文章：