<!DOCTYPE?html>
<html>
<head?lang="en">
????<meta?charset="UTF-8">
????<title>test</title>
????<style>
????????*?{
????????????margin:?0;
????????????padding:?0;
????????}
????????ul?li?{
????????????width:?300px;
????????????height:?20px;
????????????border:?1px?solid?#663333;
????????????margin-bottom:?5px;
????????}
????</style>
</head>
<body>
<ul>
????<li></li>
????<li></li>
????<li></li>
????<li></li>
</ul>
<script>
????window.onload?=?function?()?{
????????var?ul_li?=?document.getElementsByTagName('li');
????????????for?(var?i?=?0;?i?<?ul_li.length;?i++)?{
????????????????ul_li[i].index?=?i;
????????????????ul_li[i].onclick?=?function?()?{
????????????????????if?(!this.getAttribute('index'))?{
????????????????????????this.setAttribute('index',?this.index);
????????????????????????var?new_div?=?document.createElement('span');
????????????????????????var?new_span_text?=?document.createTextNode('hello');
????????????????????????new_div.className?=?'span_class';
????????????????????????new_div.appendChild(new_span_text);
????????????????????????ul_li[this.index].appendChild(new_div);
????????????????????}
????????????????????var?t_lenght?=?document.getElementsByClassName('span_class');
????????????????????for?(var?j?=?0;?j?<?t_lenght.length;?j++)?{
????????????????????????t_lenght[j].index?=?j;
????????????????????????t_lenght[j].style.display?=?'none';
????????????????????}
????????????????????//debugger;
????????????????????t_lenght[this.index].style.display?=?'block';
????????????????????console.log(t_lenght[this.index].index);
????????????????}
????????????}
?}
</script>
</body>
</html>
li從上到下順序點擊可正常插入span，從下往上點擊會報錯，請教各位幫忙查看問題在哪里？
youngfever
2017-09-01 20:07:56