Чувствительность jQuery к несвязанным селекторам CSS

Question

Я работал над форком этой скрипки - все реквизиты идут к первоначальному автору.

Он предназначен для работы с ImageMapster для выделения элемента списка html при наведении курсора на карту изображения и наоборот, для выделения соответствующей карты изображения при наведении курсора на элемент списка. Как и следовало ожидать, он работает, добавляя и удаляя класс в соответствующие места.

Я пытался использовать этот код (и варианты) с Drupal 7, который добавляет множество собственных классов как для привязки элемента меню, так и для его оболочки элемента списка. Эта дополнительная разметка вызывает проблемы с вышеупомянутым сценарием, заставляя меня чесать голову.

Путем множества проб и ошибок (я не очень хорош в JS!), Я понял, что, в частности, когда Drupal добавляет класс 'menu-глубина-1' в li, скрипт теряется и выдает ошибку (из Chrome):

Uncaught Error: Syntax error, unrecognized expression: area[name=part-1 menu]

В этой ветке вышеописанного сценария все, что я добавил, - это разметка, которую добавляет Drupal.

http://jsfiddle.net/PUncle/Tr4hE/32/

Изменение исходного скрипта из:

<li class="menu-item-a"><a href="#">Part A</a></li>

Для того, чтобы:

<li class="leaf menu-depth-1 menu-item-a"><a href="#">Part A</a></li

Насколько я понимаю, скрипт ищет дефисный селектор, и когда он сталкивается с "menu-глубина-1", прежде чем он доберется до нужного "menu-item-a", он завершается неудачей.

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

function highlightArea(key) {
    $('area[name=part-' + key + ']').mouseenter();
    $('a').removeClass('hover');
    $('li.menu-item-' + key + ' a').addClass('hover');
}

Что мне нужно сделать, так это "укрепить" скрипт, чтобы он был очень специфичным для определенного селектора и игнорировал все остальное.

Я начал идти по пути очистки чрезмерной разметки меню в Drupals, но решил, что очистка пути для "тупого" кода, вероятно, не так эффективна, как заострение этого кода, чтобы ничто другое не могло на него повлиять!

Любые указатели будут с благодарностью.

Answer 1

Попробуй это

        $('a').hover(function () {
            var parts = $(this).closest('li').attr('class').split(' ');
            var parts1 = parts[1].split('-');
            var part = parts1[2];
            highlightArea(part);
        });

        //
        $('a').mouseleave(function () {
            var parts = $(this).closest('li').attr('class').split(' ');
            var parts1 = parts[1].split('-');
            var part = parts1[2];
            highlightAreaX(part);
        });

Answer 2

Селектор выглядит подозрительно. Разве ты не имел в виду

area[name="part-1 menu"]

(Я столкнулся с проблемами с такими селекторами уже сам, когда без скобок), или

area[name=part-1] menu

?