使用查找數據屬性添加類

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屬性的值來過濾所有部分。

如果這樣做沒有幫助，請添加您的標記，以便我們可以看到您的結構。