使用jquery.fullpage.js需要动态改变导航小圆点的样式

在使用jquery.fullpage.js(2.6.7)时遇到这样的需求, 看下图:

需求是4个小圆点的样式都不一样, 看了下插件自己生成的导航的HTML结构, 发现是这样的:

很显然, 小圆点的样式主要是受<span>的影响, 但是根据当前的html结构又不能很好的区分<span>, 无奈, 情急之下改源代码:

/**
* Creates a vertical navigation bar.
*/
function addVerticalNavigation(){
    $body.append('<div id="' + SECTION_NAV + '"><ul></ul></div>');
    nav = $(SECTION_NAV_SEL);

    nav.addClass(function() {
        return options.showActiveTooltip ? SHOW_ACTIVE_TOOLTIP + ' ' + options.navigationPosition : options.navigationPosition;
    });

    for (var i = 0; i < $(SECTION_SEL).length; i++) {
        var link = '';
        if (options.anchors.length) {
            link = options.anchors[i];
        }

		// 每个<span>的类名分别是nav-dot-1, nav-dot-2, ...
        var li = '<li><a href="#' + link + '"><span class="nav-dot-'+ (i + 1) +'"></span></a>';

        // Only add tooltip if needed (defined by user)
        var tooltip = options.navigationTooltips[i];

        if (typeof tooltip !== 'undefined' && tooltip !== '') {
            li += '<div class="' + SECTION_NAV_TOOLTIP + ' ' + options.navigationPosition + '">' + tooltip + '</div>';
        }

        li += '</li>';

        nav.find('ul').append(li);
    }
}

剩下的事情就简单了, 根据不同的css类名给<span> 添加样式, 就可以达到需求.

欢迎补充指正!