关于JavaScript中的坑

小余同学

3个月前

299 次浏览

1 条评论

4032字数

技术交流

百度已收录

今天在完成jQuery文档操作练习中发现了一个坑，要实现以下效果

视频中的四个按钮在js代码中我分别以 top right bottom left 变量来创建元素

我通过js动态创建了九个子元素，然后分别把按钮添加到元素中

我打开网页看效果时发现 top 按钮就是不显示

我以为是我在jQuery链式调用的时候出了问题，但是控制台并没有报错

直到我把top 按钮输出的时候发现这个top 指向的是window

这时候我才发现了问题所在

后面我把变量名top 改为 top1 果然实现了效果按钮成功添加到了元素中

视频效果实现我用了接近两个半小时

这个实现并不难 jQuery中好多方法用得不熟练是我问题所在

学计算机的一定要多敲代码哪怕最基础的也好

下面我把效果实现的完整代码发出来

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        .container {
            width: 300px;
            height: 300px;
            display: flex;
            flex-wrap: wrap;
            margin-left: 300px;
            margin-top: 200px;
        }

        .container .item {
            border: 1px solid #000;
            width: 100px;
            height: 100px;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
        }

        .menu {
            position: absolute;
            top: 0;
            left: 0;
            width: 100px;
            height: 100px;
        }

        .menu button {
            position: absolute;
        }

        .top {
            left: 50%;
            transform: translateX(-50%);
        }

        .left {
            top: 50%;
            transform: translateY(-50%);
        }

        .right {
            left: 100%;
            top: 50%;
            transform: translate(-100%, -50%);
        }

        .bottom {
            top: 100%;
            left: 50%;
            transform: translate(-50%, -100%);
        }
    </style>
</head>

<body>
    <div class="container">

    </div>
</body>

<script>
    for (var i = 0; i < 9; i++) {
        var item = $("<div>").addClass("item");
        var content = $("<div>")
            .addClass("content")
            .text(i + 1);
        var menu = $("<div>").addClass("menu");

        var top1 = $("<button>")
            .addClass("top")
            .text("上");
        top1.click(moveTop);

        var right = $("<button>")
            .addClass("right")
            .text("右");
        right.click(moveRight);

        var bottom = $("<button>")
            .addClass("bottom").text("下");
        bottom.click(moveBottom);

        var left = $("<button>")
            .addClass("left").text("左");
        left.click(moveLeft);

        menu.append(top1, right, bottom, left);
        item.append(content, menu);
        $(".container").append(item);
    }
    function moveTop() {
        var content = $(this).parent().siblings();
        var newContent = $(this).parents(".item").prevAll(".item").eq(2).find(".content");
        $(this).parents(".item").prepend(newContent);
        $(this).parents(".item").prevAll(".item").eq(2).prepend(content);
    }
    function moveRight() {
        var content = $(this).parent().siblings();
        var newContent = $(this).parents(".item").next().find(".content");
        $(this).parents(".item").prepend(newContent);
        $(this).parents(".item").next().prepend(content);
    }
    function moveBottom() {
        var content = $(this).parent().siblings();
        var newContent = $(this).parents(".item").nextAll(".item").eq(2).find(".content");
        $(this).parents(".item").prepend(newContent);
        $(this).parents(".item").nextAll(".item").eq(2).prepend(content);
    }
    function moveLeft() {
        var content = $(this).parent().siblings();
        var newContent = $(this).parents(".item").prev().find(".content");
        $(this).parents(".item").prepend(newContent);
        $(this).parents(".item").prev().prepend(content);
    }
</script>

</html>

关于JavaScript中的坑