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>

  • 相关阅读:
    幸福之路
    mysql8.0.25安装配置教程(windows 64位)
    解决git@gitee.com: Permission denied (publickey).
    python路径拼接os.path.join()函数的用法
    如何正确的看待Python里的GIL锁
    安装激活Golang
    Django的Orm操作数据库
    爬虫技术栈点
    Django
    Python/数据库/Django笔记
  • 原文地址:https://www.cnblogs.com/lo123/p/9493823.html
Copyright © 2011-2022 走看看