无关CSS选择

Question

我一直在努力this小提琴的叉jQuery的敏感性 - 所有的道具去原作者。

它的设计与ImageMapster徘徊在图像地图上时，突出一个HTML列表项，反之亦然工作，徘徊在列表项时突出显示相应的图像映射。正如你所期望的，它可以通过向适当的地方添加和删除一个类来实现。

我一直在尝试使用该代码（和变化）使用Drupal 7，增加了很多它自己的类菜单项的两个锚及其列表项包装。多余的标记会导致上述脚本出现问题，让我挠头。

通过大量的试验和错误（我不是很擅长JS！）我已经意识到，特别是当Drupal向li添加一类'menu-depth-1'时，脚本会丢失，和引发错误（来自铬）：

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-depth-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

？