Question

所以我试图检查我是否已经添加了具有相同ID的div，如果我这样做，我将其颜色变为红色。但由于某种原因，我的div的长度为0，if子句永远不会成立。

我一直在做一些研究，这通常是由于浮动，但我没有。我只是绝对定位我的div并将它们附加到身体上。

请看看，任何帮助，我将不胜感激！感谢。

<body>
    <style>
        #box {
            background: url('a.gif') no-repeat;
            width: 50px;
            height: 30px;
            position: absolute;
            top:210px;
            left: 0;
        }
        #grid {
            background: url('grid.gif') no-repeat;
            width: 423px;
            height: 240px;
            margin-left: 4px;
        }
        #stand {
            background: black;
            width: 4px;
            height: 240px;
            margin-left: 23px;
        }
        #hstand {
            /*horizontal stand for the carrier*/
            width: 423px;
            margin-left: 27px;
            height: 4px;
            background: black;
        }
    </style>
    <script>
        $(function() {

            $('#box').click(function(e) {

                var i = 0;

                while (i < 50) { //specifying the cycles for the box' movement

                    var hstandWidth = $("#hstand").width() + 27; //getting the current x-coordinates

                    //array to randomly select x-coordinates from 
                    var items = Array(hstandWidth - (50) * 1, hstandWidth - (50) * 2, hstandWidth - (50) * 3, hstandWidth - (50) * 4, hstandWidth - (50) * 5, hstandWidth - (50) * 6, hstandWidth - (50) * 7, hstandWidth - (50) * 8);
                    //variable with the x-coordinates, which are randomly fetched from the array
                    var moveLeft = items[Math.floor(Math.random() * items.length)];

                    //array to randomly select y-coordinates from 
                    var items2 = Array(30, 30 * 2, 30 * 3, 30 * 4, 30 * 5, 30 * 6, 30 * 7);
                    //variable with the y-coordinates, which are randomly fetched from the array
                    var moveTop = items2[Math.floor(Math.random() * items2.length)];

                    // y-achs movement
                    $(this).animate({
                        "top": "" + moveTop + "px"
                    }, 80);
                    // x-achs movement with the callback function which should add the colored div to every position the box has been

                    // create closure to capture moveTop and moveLeft values for later callback
                    // use different named variables xmoveTop and xmoveLeft to distinguish the
                    // closure variable from the outer for loop variable

                    (function(obj, xmoveTop, xmoveLeft) {
                        $(obj).animate({
                            "left": "" + xmoveLeft + "px"
                        }, 80, function() {

                            if ($("#" + xmoveLeft + xmoveTop + "").length > 0) {

                                $("#" + xmoveLeft + xmoveTop + "").css("background", "red");

                            } else {

                                $("<div style='position: absolute; top: " + xmoveTop + "px; left: " + xmoveLeft + "px; background: blue; width: 50px; height: 30px;' id='" + xmoveTop + xmoveLeft + "'></div>").appendTo("body");

                                console.log($("#" + xmoveLeft + xmoveTop + "").length);
                            }

                        });
                    })(this, moveTop, moveLeft);

                    //get the box to the initial position
                    $(this).animate({
                        "left": "0px"
                    }, 80);
                    $(this).animate({
                        "top": "210px"
                    }, 80);
                    //mark cycle passed
                    i++;
                }
            });
        });
    </script>
    </head>

    <body>
        <div id="box"></div>
        <div id="stand">
            <div id="grid"></div>
        </div>
        <div id="hstand"></div>
    </body>

Answer 1

您使用id="xmoveTop + xmoveLeft"创建div，但是使用id="xmoveLeft + xmoveTop“进行搜索。

所以改变这一行：

if ($("#" + xmoveLeft + xmoveTop + "").length > 0) {
    $("#" + xmoveLeft + xmoveTop + "").css("background", "red");

致：

if ($("#" + xmoveTop + xmoveLeft + "").length > 0) {
    $("#" + xmoveTop + xmoveLeft + "").css("background", "red");

Answer 2

您搜索

"#"+xmoveLeft + xmoveTop +""

但您使用

创建了ID

" id='"+ xmoveTop + xmoveLeft +"'"

因为它们是作为字符串创建的，所以你不使用sum而是连接字符串..

将它们包裹在括号中，这样你就得到了实际的总和..

"#"+ (xmoveLeft + xmoveTop) +""和id='"+ (xmoveTop + xmoveLeft) +"'

动态添加长度= 0的div？

2 个答案: