Question

我想要做的是每次滚动时调用一个函数来检查当前容器的类，并将+1添加到当前数据属性的当前值，然后相对于数据属性切换类目前正在改变滚动类，但给出了一个＆＃34; NaN。我已经在点击上运行此功能，它工作正常。

这是一个小提琴。

这是我在滚动

上的功能

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>

我现在正在调用的功能，我觉得应该有效..

function check(){
                var
            animationHolder = $('.container'),
            currentClass = animationHolder.attr("class").match(/year[\w-]*\b/);
               var goToYear = $('.container').data('year-index');
               var goToYear2 = parseInt(goToYear,1000) + 1;

               animationHolder.toggleClass(currentClass + ' year-' + goToYear2);
               animationHolder.attr('data-year-index', goToYear2);
            }

点击

我的工作代码

$("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);

Answer 1

我重新编写了check方法：

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需要更多逻辑。
我现在通过m-index更新.data()，而不是设置数据属性。

这种方法对我来说似乎没问题。

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

1 个答案: