繁体   English   中英

如何将事件添加到每个动态生成的元素中,以及如何仅从JAVASCRIPT中的json访问数据

[英]How to add an event to each of the dynamically generated element and access data from json in JAVASCRIPT only

这是我的代码,我想在每个li元素上调用clicksubmenu函数onclick ,并且每个onclick我都必须从json访问不同的数据。

每个li元素都没有调用该函数并显示出意外结果:

码:

var submenu1 = '{ "list" : [' + '{ "name":"Wish your friend on his 
timeline "  , "occasion": "Birthday!!", "status": "Viewed", "url": "www.notification1.com"
}, ' + ' {
  "name": "Wish your friend on his timeline",
  "occasion": "Birthday!!",
  "status": "Viewed",
  "url": "www.notification1.com"
}, ' + ' {
  "name": "Wish your friend on his timeline",
  "occasion": "Birthday!!",
  "status": "Viewed",
  "url": "www.notification1.com"
}, ' + ' {
  "name": "Wish your friend on his timeline",
  "occasion": "Anniversary!!",
  "status": "Viewed",
  "url": "www.notification2.com"
}, ' + ' {
  "name": "Wish your friend on his 
  timeline " , "
  occasion ":"
  Anniversary!!","
  status ":"
  Viewed ", 
  "url": "www.notification2.com"
}, ' + ' {
  "name": "Wish your friend on his  
  timeline " , "
  occasion ":"
  Anniversary!!","
  status ":"
  Viewed ", 
  "url": "www.notification2.com"
}, ' + ' {
  "name": "Wish your friend on his 
  timeline " , "
  occasion ":"
  Birthday!!","
  status ":"
  Viewed ", 
  "url": "www.notification3.com"
}, ' + ' {
  "name": "Wish your friend on his 
  timeline " , 
  "occasion": "Anniversary!!",
  "status": "Viewed",
  "url": "www.notification4.com"
}, ' + ' {
  "name": "Wish your friend on his timeline",
  "occasion": "Birthday!!",
  "status": "Viewed",
  "url": "www.notification5.com"
}
]
}
';
var obj = JSON.parse(submenu1);
var count = obj.list.length;

var li = new Array(10);
var liid = ['l1', 'l2', 'l3', 'l4', 'l5', 'l6', 'l7', 'l8', 'l9'];

function f() {


  var i = 0;
  document.getElementById('count').innerHTML = count;
  for (i = 0; i < count; i++) {
    li[i] = document.createElement("li");
    li[i].setAttribute('id', liid[i])
    li[i].className = "liclass";
    var t = document.createTextNode(obj.list[i].occasion +
      obj.list[i].name);
    li[i].appendChild(t);
    document.getElementById('ul').appendChild(li[i]);
    li[i].addEventListener('click', clicksubmenu(i));
  }

}

function visible(submenu) {
  if (document.getElementById(submenu).className == "divVisible") {
    document.getElementById(submenu).className = 'divHidden';
  } else {
    document.getElementById(submenu).className = 'divVisible';

  }
}

function clicksubmenu(a) {

  if (document.getElementById(liid[a]).style.backgroundColor == "lightblue") {
    alert(obj.list[a].url);
  } else {
    document.getElementById(liid[a]).style.backgroundColor = "lightblue";

    alert(obj.list[a].url);
    count--;
    document.getElementById('count').innerHTML = count;
    document.getElementById(liid[a]).innerHTML = obj.list[a].occasion + "    < br > " + obj.list[a].name + " < br > " + "
    Status: " + obj.list[a].status;
  }

  if (count == 0) {
    document.getElementById('count').style.visibility = "hidden";
  }
}

Neel,可能是您有json结构问题。 您的json opbject结构应如下所示:您能否更改并检查代码。

var submenu1 = { "list" : 
[{ "name":"Wish your friend on his timeline", "occasion":"Birthday!!", "status":"Viewed","url":"www.notification1.com"},
{ "name":"Wish your friend on his timeline" , "occasion":"Birthday!!", "status":"Viewed","url":"www.notification1.com"},
{ "name":"Wish your friend on his timeline" , "occasion":"Birthday!!", "status":"Viewed","url":"www.notification1.com"},
{ "name":"Wish your friend on his timeline" , "occasion":"Anniversary!!", "status":"Viewed", "url":"www.notification2.com" },
{ "name":"Wish your friend on his timeline" , "occasion":"Anniversary!!", "status": "Viewed", "url":"www.notification2.com" },
{ "name":"Wish your friend on his timeline" , "occasion":"Anniversary!!", "status":"Viewed", "url":"www.notification2.com" },
{ "name":"Wish your friend on his timeline" , "occasion":"Anniversary!!", "status": "Viewed", "url":"www.notification2.com" }
]};

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM