使用查找数据属性添加类

Question

我正在尝试创建一个带有附加到每个导航项的唯一数据属性的菜单。单击时，我希望该导航项找到具有相同属性的部分并向其添加类。这是我目前使用的代码（它是更大脚本的一部分）。

var $el = $( '#bl-main' ),
$sections = $el.children( 'section' ),
$navItems = $( 'nav > a' );   


$navItems.on( 'click', function( event ) {

$el.addClass( 'bl-expand-item' );
$navItems.find("[data-section='" + current + "']");
$sections.find("[data-section='" + $navItems + "']").addClass( 'expand expand-top' );
} );

这是它基于的脚本。 http://tympanus.net/Development/FullscreenLayoutPageTransitions/

这个想法是添加一个单独的浮动导航来链接到不同的部分（而不是当前实现的直接点击展开）。我添加的当前脚本似乎只在点击时刷新页面。我根本无法让它在小提琴中工作，所以原始脚本我肯定会工作。粘贴关于我的部分已添加到我的本地文件中。

Answer 1

在第一行，当您尝试调用 <section> 元素时，您缺少括号前的 jQuery 简写。这应该可以修复您的脚本。

所以它应该是这样的：

var $section = $('section');

这应该让你们都准备好继续了！

Answer 2

首先，您在第一个变量赋值中缺少 $ 。 var $section = $('section')

在那之后，如果不看你的标记就很难说出你想要做什么，但我会试一试。

您似乎正试图通过 nav > a 元素的 data-section 属性过滤 $section 对象。这段代码应该做到这一点：

var $section = $( 'section' ), $navItems = $( 'nav > a' );   

$navItems.on( 'click', function( event ) {
    var $navSection = $section.filter("[data-section='" + $( this ).data( 'section' ) + "']");
    $navSection.addClass( 'expand expand-top' );
    return false;
} );

请注意，我们正在根据单击的锚点的 data-section 属性的值过滤所有部分。

如果这没有帮助，请添加您的标记，以便我们查看您的结构。