jquery click 问题

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style>
body{ margin:0; padding:0; font-size:12px; background:#333; font-family:"宋体","Arial Narrow"}
ul, li{ margin:0; padding:0; font-weight:normal; font-style:normal; font-size:12px; list-style-type:none}
a{ cursor:pointer}
.main{ width:960px; margin:auto}
.sort{ width:960px; margin-top:120px; float:left}
.sort li{ width:100px; height:100px; text-align:center; line-height:100px; font-size:20px; background:#fff; cursor:pointer; overflow:hidden; float:left; margin:0 15px 15px 0}
.mask{ width:100%; height:100%; position:absolute; top:0; left:0; background:#000; opacity:0.7; filter:alpha(opacity=70); display:none}
.photo{ width:100px; height:100px; float:left; overflow:hidden; margin:-50px 0 0 -50px; display:none; position:absolute; top:50%; left:50%; background:#fff}
.photo li{ display:none; float:left; overflow:hidden; background:#fff; position:absolute}
</style>
<script src="Js/jquery-1.6.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$(".photo").append($(".sort").html())

$(".sort li").click(function(){
var i = $(this).attr("index")

$(".photo").add(".photo li[index="+i+"]").add(".mask").show()

$(".next").click( function(){
alert(i)
})
})

$(".close").click( function(){ $(".mask").add(".photo li").hide();
$(".photo").hide();
})
})
</script>
</head>
<body> <div class="main">
        
        <ul class="sort">
            <li index="0">0</li>
            <li index="1">1</li>
            <li index="2">2</li>
            <li index="3">3</li>
            <li index="4">4</li>
            <li index="5">5</li>
            <li index="6">6</li>
            <li index="7">7</li>
        </ul>
    </div>
    
    <div class="mask"></div>    <ul class="photo">
     <a class="close">关闭</a>
<a class="next">下一张</a>
    </ul></body>
</html>
操作顺序 点任意一个 然后点下一张再点关闭  然后再点任意一个再点下一张 在这时问题就来了 我这里有一个参数i在你点下一张的时候就会弹出当前的序号  但点击多次之后这个参数就会把前面点击的序号都弹出来了  我问题是能不能每点一次只弹出一个序号
在$(".close")应该怎么写   谢谢

解决方案 »

  1.   


    <script type="text/javascript">
        $(function () {
            var i;
            $(".photo").append($(".sort").html());
            
            $(".sort li").click(function(){
                i = $(this).attr("index");
                
                $(".photo").add(".photo li[index="+i+"]").add(".mask").show();
                i = $(this).next().attr("index");
                
               
            });
            $(".next").click( function(){
                    alert(i)
                });
            
            $(".close").click( function(){
                $(".mask").add(".photo li").hide();
                $(".photo").hide();
            });
        });
    </script>
      

  2.   

    已解决$(".sort li").click(function(){
    var i = $(this).attr("index")

    $(".photo").add(".photo li[index="+i+"]").add(".mask").show()
    $(".next").unbind()
    $(".next").click( function(){
    alert(i)
    })
    })