0

1日の数時間を表すリストがあります。そのようです：

<ol>
    <li class="9">Item</li>
    <li class="10">Item</li>
    <li class="11">Item</li>
    <li class="13">Item</li>
    <!-- and so on .... -->
</ol>

そして、次のように、現在の時間を取得し、アニメーションでリスト内のその時間を見つける「Now」ボタンがあります。

$('#jump-to-now').click(function () {
        // new date object
    var date = new Date(),
        // give us the hour
        theHour = date.getHours();

    scrollToHour(theHour);
});

function scrollToHour(hourAsNumber) {
    // use the hour number and match it against a day with a class of that number
    var theListingItem = listingDays.filter('.active-day').find('li').filter('.' + hourAsNumber),
        // get the offset relative to the document
        offsetTop = theListingItem.offset().top;

    $('html, body').animate({
        scrollTop: offsetTop
    }, slideAnimationTime);
}

ここでの唯一の問題は、その時間のクラスのリスト項目がない場合、何も起こらないことです。私がやりたいのは、現在の時間の後の最も近い時間に行くことです。

たとえば、午前 7 時にユーザーがボタンをクリックすると、コードは、午前 7 時以降に一致する最も近いリスト アイテムが午前 9 時であることを検出し、そのリスト アイテムにジャンプします。

これどうやってするの？

4

3 に答える 3

1

クラスが数字で始まらないことを前提として、これは有効なクラス名を持つjsbinの例です：http ：//jsbin.com/ibeteb/3/edit

<ol>
    <li class="h9">Item</li>
    <li class="h10">Item</li>
    <li class="h14">Item</li>
    <li class="h19">Item</li>
    <!-- and so on .... -->
</ol>

var hourAsNumber = 12;
var theListingItem = $('ol li').filter(function(i, el) {
  var h = +($(el).attr('class').substring(1));
  if (h >= hourAsNumber) return $(el);
})[0];


console.log(theListingItem); // jump to this element (li.h14 in the example)

theListingItem利用可能なアイテムがundefinedない場合（例の場合など）に注意してくださいhourAsNumber = 20。

したがって、をチェックしoffset()てスクロールを開始する前に、要素が存在することを確認してください。

if (theListingItem.length) {
   /* an available hour was found - here you scroll */
}
else {
   /* say the user "you arrived too late. try again tomorrow" :)
    * or do nothing 
    */
}
于 2012-09-26T08:30:49.603 に答える
1

クラス名を数字で始めないでください。次のようにクラスを変更します

<ol>
    <li class="h9">Item</li>
    <li class="h10">Item</li>
    <li class="h11">Item</li>
    <li class="h13">Item</li>
    <!-- and so on .... -->
</ol>

その後、これを試すことができます

function scrollToHour(hourAsNumber) {   
    var hours = listingDays.filter('.active-day').find('li');
    var theListingItem = hours.filter('.h' + hourAsNumber);

    while(!theListingItem.get(0))
    {
      if(hourAsNumber<=24)
         theListingItem = hours.filter('.h' + (++hourAsNumber));
     }
     // get the offset relative to the document
     var offsetTop = theListingItem.offset().top;

     $('html, body').animate({
         scrollTop: offsetTop
     }, slideAnimationTime);
}
于 2012-09-26T08:31:10.170 に答える
1

大まかなロジック（微調整が必​​要な場合があります）：

function scrollToHour(hourAsNumber) {

    var lis = listingDays.filter('.active-day').find('li');

    // use the hour number and match it against a day with a class of that number
    var theListingItem = lis.filter('.' + hourAsNumber);

    // if no item for the specified hour, find nearest
    if(theListingItem.length == 0) {
        var delta = 1;

        while(theListingItem.length == 0 && delta <= lis.length) {
            // check next
            theListingItem = lis.filter('.' + (hourAsNumber + delta) );

            // check previous (uncomment if needed)
            /*
            if(theListingItem.length == 0) {
                theListingItem = lis.filter('.' + (hourAsNumber - delta) );
            }
            */

            delta++;
        }
    }

    // get the offset relative to the document
    var offsetTop = theListingItem.offset().top;

    $('html, body').animate({
        scrollTop: offsetTop
    }, slideAnimationTime);
}
于 2012-09-26T08:27:56.217 に答える