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>

  • 相关阅读:
    scroll
    "严格模式" use strict 详解
    thymeleaf 模板布局
    前端性能优化
    原生的强大DOM选择器querySelector
    thymeleaf 基本语法
    读书笔记JavaScript中的全局对象
    JavaScript中getBoundingClientRect()方法详解
    JavaScript 中的内存泄漏
    jsonp 跨域原理详解
  • 原文地址:https://www.cnblogs.com/lo123/p/9493823.html
Copyright © 2011-2022 走看看