0

おはようございます、これは私の 2 番目の自作 js です。私の知識とスタイルの深さが浅いことをお詫びします。私の現在の解決策は、ややバブルガムとダクトテープであると思います。

開始時刻と終了時刻を持つイベントのリストがあります。また、要素の高さを変化させるさまざまなテキスト データもあります。時間を適切な幅とオフセットに変換するために moment.js を使用しています。

要素を重ねずにできるだけ圧縮した形式で表示したい。これまでのところ、コーナー変数を保存し、ループの次の反復でそれらを比較することで、ほとんどのイベント セットで機能するようになりました。次に、現在の要素を前の要素の一番下に移動します。

イベントを以前のすべてのイベントと比較し、それに応じて配置できるようにする、これを行うためのより良い方法はありますか?

                    $('.metro_event').each(function (i) {

        // Set Width and Left Offset based on start time and duration
        pixelScale = 1.25
        startTime = $(this).attr('start_date');
        startTime = moment(startTime);
        endTime = moment($(this).attr('end_date'));
        endTime = moment(endTime);
        duration = moment.duration(endTime - startTime);
        dayStart = moment(startTime).startOf('day');
        timeOffsex = moment.duration(startTime - dayStart);
        timeOffset = ((timeOffsex - 32400000)/60000) * 1.25;
        timeWidth = (duration/60000) * 1.25;
        $(this).css("width", timeWidth + "px");
        $(this).css("left", timeOffset + "px");

        //Get Height of Current for comparison
        currentHeight = $(this).height();
        currentBottom = currentHeight

        // Get Paramters for Previous Positioned Element

        lastWidth = $(".positioned").filter(':last').width();
        lastHeight = $(".positioned").filter(':last').height();
        lastLeft = $(".positioned").filter(':last').css("left");
        lastLeft = lastLeft.substring(0, lastLeft.length - 2);
        lastLeft = lastLeft * 1
        lastTop = $(".positioned").filter(':last').css("top");
        lastTop = lastTop.substring(0, lastTop.length - 2);
        lastTop = lastTop * 1
        lastRight = lastLeft + lastWidth;
        lastBottom = lastTop + lastHeight;

        // Compare Placement to Previous Positioned Element and Move Down as required

        if (timeOffset<lastRight && currentHeight>lastTop)
            {
            $(this).css("top", lastBottom + "px");
        }

        $(this).addClass('positioned');

        // Increment Height and Set Height of Containing Div

        $('#events').css("height", "300px");


    });
4

1 に答える 1

0

使用しないでください$(".positioned").filter(':last')（何度も使用しないでください。ただし、1回だけ使用してください）。あなたが本当に欲しいのは、最後に繰り返された要素を含む変数だと思いますね。

var last = null; // or $(".positioned").filter(':last') if there are already some
$('.metro_event').each( function() {
    var $this = $(this);
    // get attributes,
    // compute moments,
    // get css styles and position values

    // Now, use the variable
    last …
    // to get position values etc of the last element
    // style $this and
    $this.addClass("positioned");

    // then, after you're done, set "last" for the next iteration
    last = $this;
});
// maybe clean the global? variable last again with
last = null;
于 2012-11-01T16:57:33.880 に答える