Question

粗略地说，我试图制作一系列按钮A B C D，点击A滚动到B，点击B滚动到C等，点击D滚动到A。

我的按钮（“标签”）都包含类tag和特定标记，例如green。我试图这样做，以便点击一个名为“绿色”的标签带你到下一个“绿色”，除非它是最后一个，在这种情况下它重新开始。

以下是我一直在尝试的内容：

$(document).ready(function(){
    counter = 0
    $('.tag').click(function(){
        counter = counter + 1; 
        var scrollTo = '.' + $(this).text(); 
        scrollTo = $(scrollTo)      
        console.debug(scrollTo);
        len = scrollTo.length
        if ( counter > len-1 ) { 
            counter = 0; 
            scrollTo = $(scrollTo)[0]; 
        } else { 
            scrollTo = $(scrollTo)[counter]
        } 
        console.debug(scrollTo);
        $('html, body').animate({ scrollTop: $(scrollTo).parent().offset().top });
    }); 
});

这大部分都有效，但前提是你从头开始。我试图让它点击第二个“绿色”标签，它会带你到第三个，等等。

我知道我在做这个不必要的错综复杂的事情。有更简单的方法吗？

Answer 1

您可以使用此代码查找当前元素的索引：

    var counter = 0; 
    var scrollToSelector = '.' + $(this).text(); 
    var scrollTo = $(scrollToSelector);
    var self = this;
    scrollTo.each(function(i, e){
        if (e == self) {
            counter = i + 1;
        }
    });
    if (counter >= scrollTo.length) {
        counter = 0;
    }

如何在JQuery中滚动元素？

1 个答案: