0

Google 画像スタイルのエキスパンド ボックスを使用する Web サイトのページを作成しています。<div>ユーザーが現在表示している情報がわかるように、エキスパンドにインジケーターを配置しようとしています。ほぼ完璧に機能しています。唯一の問題は、ページがロードされた直後に最初のボックスではないボックスをクリックすると、三角形が定義された css ルールから外れるということです。

.triangle { margin-left: 25px; }

特定の行に画像を保持する各コンテナーには、1 から 6 までの列を識別するためのクラスが含まれています。この列クラスを使用して、左マージンを設定します。

function getMarginLeft(obj) {
    if( obj.hasClass('first') ) {
        x = '25px';
    }
    ...
    else if ( obj.hasClass('sixth') ) {
        x = '605px';
    }

    return x;
}

$('.superbox-list').click(function() {
    var ml = getMarginLeft($(this));
    $(".triangle").css('margin-left',ml);
}

これが最初に無視される理由がわかりません。http://wwwdev.cco.purdue.edu/about/ncp.shtmlでチェックしてください。

例: ページが読み込まれた直後に、ALDI ボックスをクリックします。三角形が正しく表示されます。ベクテルをクリックします。正常に動作します。ページをリロードし、最初に Bechtel ボックスをクリックします。三角形は ALDI ボックスの下に表示されますが、すぐに別のボックスをクリックすると、適切な場所に移動します。

助けてくれてありがとう！

マット

4

1 に答える 1

1

問題は、三角形がまだドキュメントに挿入されていないため、最初の$(".triangle").css('margin-left', ml)実行では何も適用されないことです。

したがって、この行を挿入の後に移動するか (行 93、superbox.insertAfter(this)...)、triangle.css('margin-left', ml)変数を参照して行を に変更することができます。

于 2013-05-28T17:25:20.533 に答える