0

我有一个列表，它代表一天中的几个小时。像这样：

<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>

我有一个“现在”按钮，它可以获取当前时间，然后通过动画在列表中找到该时间，如下所示：

$('#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

大致的逻辑（您可能需要调整）：

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 回答
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 回答