ex-7.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<script type="text/javascript" src="scripts/jquery-1.4.2.js"></script>
<script type="text/javascript">
function replaceElement(ele1, ele2) {
var $ele1Temp = $(ele1).clone(true) ;
var $ele2Temp = $(ele2).clone(true) ;
$(ele1).replaceWith($ele2Temp) ;
$(ele2).replaceWith($ele1Temp) ;
}
//需求: 点击 city 节点的任何 li 节点都能完成如下功能: 替换为 game 相应索引的节点; 反之亦然
$(function(){
//为每一个 li 节点增加 index 属性
/**
* $("li") 这里返回的是一个数组！,那么问题就来了！
* 为什么在$("li").click(...)增加方法的时候，没有使用each()这个方法呢？
* 这是因为给每一个 li 节点增加的是相同的方法（看清楚是相同的）,是不需要用each()这个方法的
* 可是这里是在给每一个 li 节点类型的增加一个索引, 从而使每一个 li 节点与其他的不同！（看清楚这个说的是不同！）
* 所以就使用了each()这个方法
*
*/
$("li").each(function(i){
//这里的 i 是each()方法默认自带的！可以理解是这个标签数组的索引
//alert("0000") ;
$(this).attr('index', i) ;
//alert('111') ;
$(this).click(function() {
//获取 index 属性值
var index = $(this).attr('index') ;
//设置与 index 相交换的那个对象的 索引
var targetIndex = 0 ;
if(index < 4) {
targetIndex = parseInt(index) + 4 ;
}else {
targetIndex = parseInt(index) - 4 ;
}
var target = $("li").get(targetIndex) ;
//alert($(this).attr('index')) ;
/*
这里应该注意一个小小的问题！仔细的看一下下面两行代码！
说白了就是-->在元素还没有交换之间先将 index 的属性值交换了!
为什么要在没有交换属性之前先将 index 的属性值交换呢？
这是因为属性值的交换和元素整体的交换是不一样的！前者是部分交换而后者是整体交换
在这里首先先交换属性值是为了为后面整体交换做准备！
并且也为任意两个节点相互交互（这里说的是相互交换而不是单向交换）做准备！
*/
$(this).attr('index', targetIndex) ;
$(target).attr('index', index) ;
//这里就是元素的整体交换
replaceElement(this, target) ;
}) ;
}) ;
}) ;
</script>
</head>
<body>
<p>
你喜欢哪个城市?
</p>
<ul id="city">
<li id="bj" name="BeiJing">
北京
</li>
<li>
上海
</li>
<li>
东京
</li>
<li>
首尔
</li>
</ul>
<br>
<br>
<p>
你喜欢哪款单机游戏?
</p>
<ul id="game">
<li id="rl">
红警
</li>
<li>
实况
</li>
<li>
极品飞车
</li>
<li>
魔兽
</li>
</ul>
</body>
</html>
6124
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
