Question

这是我的代码，我想在每个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";
  }
}

Answer 1

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" }
]};

如何仅在JAVASCRIPT中向每个动态生成的元素添加事件并从json访问数据

1 个答案: