<!DOCTYPE?html>
<html>
<head?lang="en">
????<meta?charset="UTF-8">
????<title>test</title>
????<style>
????????li?{
????????????list-style-type:?none;
????????}
????????
????????ul?li?{
????????????width:?300px;
????????????height:?20px;
????????????border:?1px?solid?#663333;
????????????margin-bottom:?5px;
????????????text-align:?center;
????????}
????????#div1?{
????????????width:?300px;
????????????height:?100px;
????????????margin-left:?40px;
????????????border:?1px?solid?rebeccapurple;
????????}
????????#div2?{
????????????width:?150px;
????????????height:?100px;
????????????background-color:?#954b4b;
????????????margin:?0?auto;
????????????text-align:?center;
????????????line-height:?100px;
????????????color:?white;
????????????display:?none;
????????}
????</style>
</head>
<body>
<div?id="qq_talk_seach_head">
????<span></span>
</div>
<ul>
????<li>1</li>
????<li>2</li>
????<li>3</li>
????<li>4</li>
</ul>
<div?id="div1">
????<div?id="div2"></div>
</div>
<script>
????window.onload?=?function?()?{
????????var?ul_li?=?document.getElementsByTagName('li');
????????var?div1?=?document.getElementById('div1');
????????var?div2?=?document.getElementById('div2');
????????function?getStyle(obj,?attr)?{
????????????if?(obj.currentStyle)?{
????????????????//alert(obj.currentStyle[attr]);
????????????????return?obj.currentStyle[attr];
????????????}
????????????else?{
????????????????return?getComputedStyle(obj,?false)[attr];
????????????}
????????}//
???????
???????????????for?(var?i?=?0;?i?<?ul_li.length;?i++)?{
????????????????????????????ul_li[i].index?=?i;
????????????????????????????ul_li[i].onclick?=?function?()?{
????????????????if?(getStyle(div2,?'display')?===?'none')?{
????????????????????div2.style.display?=?'block';
????????????????}
????????????????//debugger;
????????????????if?(!this.getAttribute('index'))?{
????????????????????this.setAttribute('index',?this.index);
????????????????????var?new_span?=?document.createElement('span');
????????????????????var?new_span_text?=?document.createTextNode(ul_li[this.index].innerHTML);
????????????????????div2.appendChild(new_span);
????????????????????new_span.appendChild(new_span_text);
????????????????????new_span.className?=?'span_class';
????????????????}
????????????????var?t_lenght?=?document.getElementsByClassName('span_class');
????????????????for?(var?j?=?0;?j?<?t_lenght.length;?j++)?{
????????????????????t_lenght[j].style.display?=?'none';
????????????????}
????????????????t_lenght[this.index].style.display?=?'block';
????????????????console.log(t_lenght.length);
????????????}
????????}
????????div2.onclick?=?function?()?{
????????????if?(getStyle(div2,?'display')?===?'block')?{
????????????????div2.style.display?=?'none';
????????????}
????????}
?}
</script>
</body>
</html>
js中嵌套for循環this指向問題-求解答？
youngfever
2017-09-02 19:23:29