Javascript 使用data属性更改滚动HTML5上的div类

我试图做的是每次有人滚动时调用一个函数，该函数检查容器的当前类，并将+1添加到当前数据属性的当前值，然后相对于数据属性切换该类，它当前正在滚动更改类，但给出一个“南。我已经在运行这个功能点击，它的作品很好

这是一把小提琴

这是我的滚动功能

var timeout;

$(window).scroll(function() {
if(typeof timeout == "number") {
    window.clearTimeout(timeout);
    delete timeout;
}
  timeout = window.setTimeout( check, 100);
});

我的html看起来像这样

<div class="container year-1987" data-year-index="1987">
    Some Content
</div>

点击我的工作代码

$("a").click(function (e) {
        e.preventDefault();
        var
            animationHolder = $('.container'),
            currentClass = animationHolder.attr("class").match(/year[\w-]*\b/);
        var goToYear = $(this).data('year-index');
        animationHolder.toggleClass(currentClass + ' year-' + goToYear);
        animationHolder.attr('data-year-index', goToYear);

---

我重写了您的

检查方法：

function check() {
    var $container  = $('.container'),
        currentYear = $container.data('m-index'),
        nextYear    = 1 + currentYear;
    $container.removeClass('m-' + currentYear).addClass('m-' + nextYear);
    $container.data('m-index', nextYear);
}

我做了以下修改：


不需要正则表达式，因为我们可以自己生成类名
我不知道为什么您最初使用两个单独的数据属性（m-index和year index），但我将它们切换为两个匹配。如果您同时需要这两个索引，则需要更多的逻辑来在初始调用后使用
year index
我现在通过
.data（）
更新
m-index
，而不是设置数据属性

这种方法似乎对我很有效

function check() {
    var $container  = $('.container'),
        currentYear = $container.data('m-index'),
        nextYear    = 1 + currentYear;
    $container.removeClass('m-' + currentYear).addClass('m-' + nextYear);
    $container.data('m-index', nextYear);
}