提高编码和调试技能的建议

Question

（ty putvande和shanet指出错误的'）'现在被删除了，但是我已经重新发布了这个问题，因为它只得到了与这个小错误相关的答案而不是主要问题）

我在javascript中构建以下内容时遇到了很多困难：

对于Assemble_station class

的每个元素

检查Assemble_station class

是否与其他元素重叠

如果确实如此：检查哪个元素的左侧位置最大，将左侧最大位置的元素移动到另一个位置以避免碰撞

这是我写的

$(".Assemble_station").each(function (i, firstobj) {
    $(".Assemble_station").each(function (i, secondobj) {
        if ($(firstobj).overlaps($(".Assemble_station").not(firstobj), secondobj)) {
            if ($(firstobj).css("left") >= $(secondobj).css("left")) {
                $(secondobj).css("top", "98px");
            }
        }
    });
});

这是一个使用后面代码的jsfiddle：http://jsfiddle.net/NxWxU/6/

总结一下这个问题，我正在努力找到做上述内容的最佳实践方法。到目前为止，我不明白为什么我目前的代码甚至没有工作。＆gt;。＆lt;

如果你在jsfiddle中破坏我的代码并在移动到相同的垂直位置之前观察它们的位置，你可以看到一些元素明显重叠。

Ty花时间尝试帮助

Answer 1

提高编码和调试技能的建议

您更新的代码（在其中您解决了缺少overlaps函数）失败，因为jQuery插件不应该以这种方式使用。在尝试解决此类问题之前，请考虑阅读creating jQuery plugins，以及尽可能多的javascript调试。

尝试在设置断点（或使用代码中的debugger语句）后在控制台中执行以下所有操作来开发调试功能：

逐步播放相关代码
检查变量值
通过stacktrace
在控制台中输入命令以查看代码在该上下文中的行为

例如，要解决此问题，我在控制台中使用了一些 jQuery ：

> $(".Assemble_station") // this returned elements with [visibility:hidden] so I tried:
> $(".Assemble_station:visible") // but I got the same results, so I ended up using:
> $(".taskNameItem").remove() // then I checked again:
> $(".Assemble_station") // and now the results are different :)

所有这些都是在控制台中完成的，无需更改代码。因此，当您的代码处于断点时，通过将命令放在控制台中，您可以真正学到很多东西。但是在jsFiddle中，请记住使用控制台底部的下拉列表从<top frame>更改为result框架。

代码中的实际问题

将overlaps更改为jQuery插件的问题是，可以同时在多个项目上调用jQuery插件。因此很难将其作为插件使其正常工作，并且最好使用原始版本。

但是使用原始函数的问题在于它适用于普通的HTML元素，但是你的元素并不那么简单（因为你隐藏了部分，容器具有位置，而内容具有大小）。因此，我不得不入侵getPosition内的overlaps函数，使其与您奇怪的HTML一起使用：

var overlaps = (function () {
    function getPositions( elem ) {
        var obj = $( elem );
        var pos = obj.position();
        //HACK: weird HTML force me to use its first child's dimensions
        var child = obj.children(":first-child"); 
        var width = child.width();
        var height = child.height();
        return [ [ pos.left, pos.left + width ], [ pos.top, pos.top + height ] ];
    }

看看这个关于如何使用overlaps函数的新代码（在第二个each中，我不仅删除了firstobj，还删除了之前循环中已经测试过的所有其他对象使用i1 + 1作为起点）：

var stations = $('.Assemble_station');
stations.each(function(i1, firstobj) {
    stations.slice(i1 + 1).each(function(i2, secondobj) {
        if(overlaps(firstobj, secondobj)) {
            var obj1 = $(firstobj);
            var obj2 = $(secondobj);
            var objToMove = obj1.position().left >= obj2.position().left ? obj1 : obj2;
            var newTop = objToMove.position().top + 18;
            objToMove.css("top", newTop + 'px');
        }
    });
});

您的另一个问题是您网页上的多个元素正在共享ID。如果给元素一个id，它应该是整个页面中唯一具有该id的元素。如果你不遵守这个基本的HTML假设，jQuery将无法按预期工作。我通过删除（而不是隐藏）标题和黄色条（并在通过id获取对象之前执行此操作）来修复此问题，因此它们不会干扰碰撞检测。

完整的解决方案

你可以在这里玩我的jsFiddle：http://jsfiddle.net/protron/NxWxU/8/

jQuery检查每个元素与类中的每个其他元素

1 个答案:

提高编码和调试技能的建议

代码中的实际问题

完整的解决方案