jquery - 带有 () 值的属性上的 jquery 选择器

Question

给出了以下列表（简化）：

<ul id="items">
  <li PK1="1" PK2="abc">value1</li>
  <li PK1="2" PK2="abc">value2</li>
  <li PK1="3" PK2="def(1)">value3</li>
  <li PK1="4" PK2="def(1)">value4</li>
</ul>

<ul id="types">
  <li PK="abc">abc</li>
  <li PK="def(1)">def</li>
</ul>

当用户将鼠标悬停在列表“类型”的列表项上时，列表“项目”中的相应项目需要进行视觉更改。

我使用的选择器是：

sCrit += '[pk2=\'' + $(this).attr('pk') + '\']';
$('ul#items li' + sCrit).addClass('Highlight');

在实际示例中，只要我将鼠标悬停在 listitem def 上，页面就会崩溃（100% CPU），因为属性中的 () （已确认）。列表“类型”的 PK 值无法更改，因此这不是一个选项。

似乎 jquery 解析器正在寻找的不仅仅是属性的值。我能做些什么来完成这项工作？

Answer 1

我认为您的属性选择不正确...我认为您的代码需要是这样的..

 var sCrit = '[PK2="' + $(this).attr('PK')+'"]';
 $('#types li' + sCrit).addClass('Highlight');

Answer 2

试试这个代码

var sCrit= '';
$('ul#items li').hover(function(){
  sCrit = '[pk="' + $(this).attr('pk2') + '"]';     
  $('ul#types li' + sCrit).addClass('Highlight');
});

$('ul#items li').mouseleave(function(){
  $('ul#types li' + sCrit).removeClass('Highlight');
});

检查这个演示