1

(間違った ')' を指摘してくれた ty putvande と shanet は削除されましたが、主な質問ではなく、その小さな間違いに関連する回答しか得られなかったため、質問を再投稿する必要がありました)

javascriptで以下を構築するのに多くの困難があります:

を含むすべての要素についてAssemble_station class

他の要素と重なっているかどうかを CHECKAssemble_station class

該当する場合: 2 つのうち、左の位置が最も大きい要素を確認し、左の位置が最も大きい要素を別の場所に移動して、衝突を回避します。

ここに私が書いたものがあります

$(".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/

質問を要約すると、上で説明したことを実行するためのベスト プラクティスの方法を見つけようとしています。これまでのところ、現在のコードが機能しない理由さえわかりません。>.<

jsfiddle で私のコードを壊し、同じ垂直位置に移動する前にそれらの位置を見ると、一部の要素が明らかに重なっていることがわかります。

時間を割いて助けを求めてくれたTy

4

1 に答える 1

1

コーディングとデバッグのスキルを向上させるための提案

jQueryプラグインはそのように使用されることは想定されていないため、更新されたコード（関数の欠如を解決したoverlaps）は失敗しています。この種の問題を解決しようとする前に、 jQuery プラグインの作成について読んだり、JavaScript のデバッグについてできる限り読んでみてください。

debuggerブレークポイントを設定した後 (またはコード内でステートメントを使用した後)、コンソールで次のすべてを実行して、デバッグ機能を開発してみてください。

  • 関連するコードを段階的に再生する
  • 変数の値を確認する
  • スタックトレースをたどる
  • コンソールにコマンドを配置して、そのコンテキストでコードがどのように動作するかを確認します

たとえば、この問題を解決するために、コンソールに 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

コード内の実際の問題

jQuery プラグインに変更overlapsする際の問題は、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関数の使用方法に関するこの新しいコードを見てください(2 番目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/

于 2013-08-08T18:33:58.830 に答える