1

私には一連の年があります：

$years = [1952,1954,1961,1962,1965,1982,1984,1984,1984,1985,1986,1986,1987,1988,1990,1991,1991,1993,1995]

タイムラインを作成していますが、タイムラインは10年の範囲を使用しているため、次のようになります。

       1950      1960      1970      1980
.........|.........|.........|.........|.........

jQueryの助けを借りて、各関数をループし、divを作成してタイムラインに表示し、左側のcss属性（1年は22px）を使用して配置します。

$.each(years, function(key, value) { 
    var event = $('<div>').addClass('event');
    var posX = value*21;

    event = event.html(value).css('left',posX+'px');

    $('#timeline').append(event);
});

これまでのところ良いのですが、私には何年もあり、正しく表示できないことがわかります。

10年の範囲で3つ以上のイベントがある場合、イベントdivの代わりにボタンを表示したいのですが、それをクリックすると、ポップアップを使用して残りのイベントを表示できます。

どうすればこれを達成できますか？

4

1 に答える 1

3

関連する数十年のうちの数年で作業する方が簡単です。decades配列を作成し、次のように入力します。

var $years = [1952,1954,1961,1962,1965,1982,1984,1984,1984,1985,1986,1986,1987,1988,1990,1991,1991,1993,1995];

var decades = [];
for(var i=0; i<$years.length; i++)
{
    var year = $years[i];
    var decade = (Math.floor(year / 10) * 10);
    if(!decades[decade])
        decades[decade] = [];
    decades[decade].push(year);
}

for(decade in decades){
    var years = decades[decade];
    // decade will be 1950, 1960, 1980, etc.
    // years will be an array of years within that decade

    if(years.length > 3) {
        // ...
    } else {
        // ...
    }
}
​
于 2012-12-23T17:53:36.123 に答える