zoukankan      html  css  js  c++  java
  • 利用jQuery选择器和jQuery中的DOM操作实现九宫格拼图

        <script type="text/javascript">
            $(function () {
                $("td").click(function () {

                    var str = $(this).attr("id");//获取当前点击<td>的id
                   
                    if ((parseInt(str) + 3) < 10 && $("#table1 td[id=" + (parseInt(str) + 3) + "]").children().length == 0) {//向下
                        $(this).find("img").appendTo("td[id=" + (parseInt(str) + 3) + "]");
                    }
                    else if (parseInt(str) % 3 != 0 && $("#table1 td[id=" + (parseInt(str) + 1) + "]").children().length == 0) {//向右
                        $(this).find("img").appendTo("td[id=" + (parseInt(str) + 1) + "]");
                    }
                    else if ((parseInt(str) - 3) > 0 && $("#table1 td[id=" + (parseInt(str) - 3) + "]").children().length == 0) {//向上
                        $(this).find("img").appendTo("td[id=" + (parseInt(str) - 3) + "]");
                    }

                    else if (parseInt(str) % 3 != 1 && $("#table1 td[id=" + (parseInt(str)-1) + "]").children().length == 0) {//向左
                        $(this).find("img").appendTo("td[id=" + (parseInt(str) - 1) + "]");
                    }

                })

            })
        </script>

    <body>

        <div class="box">

            <table id="table1" class="mytable">
                <tr>
                    <td id="1">
                        <img src="Files/01.gif" /></td>
                    <td id="2">
                        <img src="Files/02.gif" /></td>
                    <td id="3">
                        <img src="Files/03.gif" /></td>
                </tr>
                <tr>
                    <td id="4">
                        <img src="Files/04.gif" /></td>
                    <td id="5">
                        <img src="Files/05.gif" /></td>
                    <td id="6">
                        <img src="Files/06.gif" /></td>
                </tr>
                <tr>
                    <td id="7">
                        <img src="Files/07.gif" /></td>
                    <td id="8">
                        <img src="Files/08.gif" /></td>
                    <td id="9"></td>
                </tr>
            </table>

        </div>

    </body>

  • 相关阅读:
    读Windows核心编程2字符和字符串
    HTTP Error 404.3 while browse to WCF service
    读Windows核心编程3内核对象
    代码安全性的基本原则[转载]
    在HyperV中安装和配置Ubuntu网络
    使用Windows Azure Mobile Service开发Windows Phone 8 App
    Js 学习 使用js arguments 写一个 多态overload 的小程序。 js 闭包写一个10的阶乘的算法
    js 学习 函数
    jquery slider show carouFredSel
    vs 2010 创建windows phone 程序 出现System.ArgumentNullException Value cannot be null. Parameter name: parentContext
  • 原文地址:https://www.cnblogs.com/lo123/p/9493823.html
Copyright © 2011-2022 走看看