jQuery练习题七 _Web前端

jQuery练习七
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>