您的位置：首页 > Web前端 > JQuery

Jquery获取当前元素的索引值

2010-06-24 09:41 316 查看

比如我有一组 <p> 元素例如10个隔行表示底色的<p>，我想要点击某个<p> 之后，改变底色，

再点击一次就返回原来的颜色。这样的话就要得到当前元素的索引值，根据这个值来判断，恢复何种颜色。

代码如下，其中 获取当前元素的索引值可以是 $(this).index() 这样的表达方法。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset="EUC-JP">
<link href="./css/mystyle.css" type="text/css" rel="stylesheet" media="all"/>
<title>my Test!!!</title>
<script language="javascript" src="js/jquery-1.4.2.min.js" ></script>
</head>
<body>
<div>
<p>row1</p>
<p>row2</p>
<p>row3</p>
<p>row4</p>
<p>row5</p>
<p>row6</p>
<p>row7</p>
<p>row8</p>
<p>row9</p>
<p>row10</p>
</div>

<?php
?>
<script language="javascript">
$(document).ready(function(e){
$("p").css({"background-color":"#00ff00", "font-size":"15px"});
$("p:even").css({"background-color":"blue", "font-size":"20px"});

$("p").toggle(

function() {
$(this).css({"background-color":"pink", "font-size":"30px"});
},
function(){

var num = $(this).index()+1;
if (num%2) {
$(this).css({"background-color":"blue", "font-size":"20px"});
} else {
$(this).css({"background-color":"#00ff00", "font-size":"15px"});
}
}
);
});

</script>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航