0

小さな div を保持する 1 つの div と、開始点としての 1 つの空のスペースがあります。私がやりたいことは、空のスペースに隣接しているdivをクリックすると、クリックされたdivがその空のスペースに移動し、別の空のスペースを作成する必要があり、クリックすると近くの他のdivによって占有されます。アイデアは、動きをどこに移動するかを決定するために小さなdivに自動メカニズムが必要であり、css位置で制御する/制御する必要があるということです。jqueryを初めて使用する場合、任意の提案を歓迎します。これが私のコードです。2行のdivから始めたばかりですが、4行に移動する前にこれを取得できません

<html>
    <head> 
    <title>divs</title>
        <link rel="stylesheet" media="all" type="text/css" href="css/main.css"/>
        <script type="text/javascript" src="js/jquery-1.8.0.js"></script>
    </head>
<script type="text/javascript">
    $(document).ready(function() {
        var goTo= new Array("2,5","1,3,6","2,4,7","3,8","1,6","2,5,7","3,7,8","4,7");
        var position= new Array("0,0","0,0,60","0,0,120","0,180","0,60","0,0,120","0,60,180","0,120");
        var here=8;
        var click=true;
        $(".box").click(function(){
            if(click==true){
                click=false;
                var id=$(this).attr("id");
                id=id.split("_");
                id=parseInt(id[1]);
                id--;
                var adjacents=goTo[id];
                adjacents=adjacents.split(",");
                var move=false;
                for(i in adjacents){
                    if(adjacents[i]==here){
                        move=true;
                    }
                }
                if(move==true){
                    var movePos=position[(here-1)];
                    alert(movePos);
                        movePos=movePos.split(",")
                    $(this).animate({top:movePos[0],left:movePos[1]},1000,function(){
                        $(this).attr("id","box_"+here);
                        here=id+1;
                        click=true;
                    })
                }
                else{
                    click=true;
                }
            }


        });

    });
</script>
    <body>
        <div id="container">

                <div id="box_1" class="box" style="background:yellow;top:0px;left:0px;">
                    1
                </div>
                <div id="box_2" class="box" style="background:red;top:0px;left:60px;">
                    2
                </div>
                <div id="box_3" class="box" style="background:magenta;display:block;top:0px;left:120px;">
                    3
                </div>

                <div id="box_4" class="box" style="background:brown;top:0px;left:180px;">
                    4
                </div>
                <div id="box_5" class="box" style=" background:orange;top:60px;left:0px;">
                    5
                </div>
                <div id="box_6" class="box" style="background:pink;top:60px;left:60px;">
                    6
                </div>
                <div id="box_7" class="box" style="background:green;top:60px;left:120px;">
                    7
                </div>

        </div>
    </body>
</html>
4

1 に答える 1

0

こんにちは、その大きな div 内に同じ数の小さな div を作成することができます。そして、小さな div の 1 つを透明にします。次に、その透明な div の近くにある div をクリックすると、クリックされた div の css が透明な div に変更され、その逆も同様です。jQuery を使用して css を交換する

于 2012-08-18T22:00:37.193 に答える