Использовать атрибут find data для добавления класса

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 атрибутом раздела данных элемента 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; 
}); 

Обратите внимание, что мы фильтрацию всех секций по значению атрибута данных раздела, по которым щелкнули анкера.

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