js中的索引值这个看不懂啊

JavaScript09

js中的索引值这个看不懂啊,第1张

纠正一下不是abtn[i].index=i而是aBtn[i].index=i，因为之前定义的是aBtn，js区分大小写。

简单原因其实就是为了保存住每个循环时i的值。

没明白，看下面。

<script type="text/javascript">

window.onload=function() {

var aBtn=document.getElementsByTagName('input')

var arr=['王二','王三','王四']

for (var i = 0i <aBtn.lengthi++) {

aBtn[i].index=i

aBtn[i].onclick=function(){

alert(i)//3

this.value=arr[this.index]

}

/*闭包写法

(function(){

var ii=i//将当前的i值保存到闭包方法中

aBtn[i].onclick=function(){

alert(ii)//0、1、2

this.value=arr[ii]

}

})()

*/

}

}

</script>

<input type="text" /><input type="text" /><input type="text" />

加了个alert就会发现，当点击文本框时，弹出的其实都是3。

原因如下：

首先for执行完成时i的值是3，这个应该知道。

而i的作用域是在整个for中的，也就是说只要在for中改变了i的值，然后alert(i)就是i改变后的值了。

aBtn[i].index=i是将当时循环的i值保存到控件对象上，然后点击时直接获取当前触发的控件对象上的值，所以就能正常获取到0、1、2了。

当然如果不想保存到控件对象，也是有办法实现的，代码中有一个闭包的注释，打开它，去掉for中的其它内容，就可以了，最后实现的效果是一样的。

用JS遍历就可以做，代码如下：

<ul id="test">

<ul>

<li>111</li>

<li>222</li>

<li>333</li>

<li>444</li>

</ul>

</ul>

<script>

window.onload=function(){

  var ul=document.getElementById('test')

  var ul_lis=ul.getElementsByTagName('li')

    for (var i = 0i < ul_lis.length i++) {

      ul_lis[i].index = i

      ul_lis[i].onclick=function(){

        var j=this.index+1

        alert(j)

      }

    }

}

</script>

如果想简单的放用Jquery很方便就可以获取。

<ul id="test">

<ul>

<li>111</li>

<li>222</li>

<li>333</li>

<li>444</li>

</ul>

</ul>

<script>

$("#test li").click(function(){

var index = $(this).index()+1

alert(index)

return false

})

</script>

JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。

你看看这是否是你想要的效果：

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title></title>

<meta name="viewport" content="width=device-width,initial-scale=1.0" />

</head>

<body>

<ul>

<li>java</li>

<li>c#</li>

<li>python</li>

<li>c++</li>

<li>ruby</li>

<li>html</li>

</ul>

<p></p>

<script>

var oUl = document.getElementsByTagName('ul')[0]

var oLi = document.getElementsByTagName('li')

var oP = document.getElementsByTagName('p')[0]

oUl.onmouseover=function(e){ // 注册移上事件

var o=e||event

var target=o.target||o.srcElement // 触发事件的目标

if(target.nodeName.toLowerCase() == 'li'){ // 确定目标是li标记

for (var i = oLi.length - 1 i >= 0 i--) { // 遍历所有的li标记，将背景设置为白色

oLi[i].style.background = "#fff"

}

target.style.background='yellow' // 将当前移上的li标记背景设置为黄色

oP.innerHTML = target.innerHTML // 设置p的内容

}

}

</script>

</body>

</html>