Используйте атрибут поиска данных, чтобы добавить класс

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')

После этого трудно понять, что вы пытаетесь сделать, не видя разметки, но я попробую.

Похоже, что вы пытаетесь отфильтровать объект $section по атрибуту data-section элемента nav > a. Этот код должен сделать именно это:

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 кликающего клика.

Если это не поможет, добавьте вашу разметку, чтобы мы могли видеть вашу структуру.