使用查找数据属性添加类

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>元素的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属性的值来过滤所有部分。

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