我有点 jQuery 菜鸟，但我找不到一个非常基本的问题的答案！
我正在尝试创建一个系统，用户可以在其中单击列表中的单词，然后 jQuery 获取该列表项的内容，将其添加到变量中，然后在我的演示中为另一个列表中的任何项目添加背景颜色它找到那个词。
代码似乎可以创建变量，并且变量的内容是正确的，但是我无法让它在选择器的 :contains(variable) 部分中使用变量的内容。如果我手动添加一个单词，例如铝，它似乎工作正常。
我敢肯定这只是我使用该语言的经验不足，但几天来一直在谷歌中搜寻非常复杂的系统，但没有这样的基础知识。
您可以从下面看到我正在使用 alert(test) 来检查变量是否包含正确的字符串，然后我试图将该字符串传递给 :contains(test) 或 (#test) 以便它搜索突出显示 table.selection-items 中包含此字符串的行。
任何想法都会很棒。对不起，这是一个菜鸟问题！
感谢 Simon
HTML
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="config-test.js" type="text/javascript"></script>
<style type="text/css">
.highlight {
color: #F00;
}
.selection-itemsdiv {
display: block;
width: 200px;
background-color:#CCC;
}
</style>
</head>
<body>
<p class="no-script">For the selection guide to work you must have javascript enabled</p>
<ol class="selection-criteria">
<li>Is this for a hazardous location? For example ex d rated enclosures?
<ol class="hazardous">
<li>Yes</li>
<li>No</li>
</ol>
</li>
<li>Materials
<ol class="material">
<li>Plastic</li>
<li>Steel</li>
<li>Aluminium</li>
<li>Stainless Steel</li>
</ol>
</li>
<li>IP Rating
<ol class="iprating">
<li>IP55</li>
<li>IP56</li>
<li>IP65</li>
<li>IP66</li>
</ol>
</li>
</ol>
<table class="selection-items">
<thead>
<tr>
<td>Image</td>
<td>Range</td>
<td>Hazardous Location</td>
<td>Material</td>
<td>IP Rating</td>
<td>Smallest Size</td>
<td>Biggest Size</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
</thead>
<tbody>
<tr>
<td class="image">Image</td>
<td class="range">Universal NI (Steel)</td>
<td class="hazardous">No</td>
<td class="material">Steel</td>
<td class="iprating">IP66</td>
<td class="smlsize">300x200x150</td>
<td class="lrgsize">1200x800x300</td>
</tr>
<tr>
<td class="image">Image</td>
<td class="range">Monarch IP (Stainless)</td>
<td class="hazardous">No</td>
<td class="material">Stainless Steel</td>
<td class="iprating">IP66</td>
<td class="smlsize">300x200x175</td>
<td class="lrgsize">2000x800x600</td>
</tr>
<tr>
<td class="image">Image</td>
<td class="range">Monarch IP (Aluminium)</td>
<td class="hazardous">No</td>
<td class="material">Aluminium</td>
<td class="iprating">IP66</td>
<td class="smlsize">407x407x272</td>
<td class="lrgsize">2007x807x602</td>
</tr>
<tr>
<td class="image">Image</td>
<td class="range">Connector TE (Steel)</td>
<td class="hazardous">No</td>
<td class="material">Steel</td>
<td class="iprating">IP66</td>
<td class="smlsize">150x150x80</td>
<td class="lrgsize">600x200x120</td>
</tr>
<tr>
<td class="image">Image</td>
<td class="range">Connector TE (Steel)</td>
<td class="hazardous">No</td>
<td class="material">Stainless Steel</td>
<td class="iprating">IP66</td>
<td class="smlsize">150x150x80</td>
<td class="lrgsize">600x200x120</td>
</tr>
<tr>
<td class="image">Image</td>
<td class="range">Exe Sloping Roof Terminal Box</td>
<td class="hazardous">Yes</td>
<td class="material">Stainless Steel</td>
<td class="iprating">IP66</td>
<td class="smlsize">300x200x150</td>
<td class="lrgsize">1200x800x300</td>
</tr>
</tbody>
</table>
<div class="selection-itemsdiv">
<h3>Connector TE</h3>
<p>No</p>
<p>Stainless Steel</p>
<p>IP66</p>
<p>300x200x150</p>
<p>1200x800x300</p>
</div>
</body>
</html>
jQuery
$(document).ready(function() {
// This removes the Script warning on the page
$('p.no-script').remove();
$('ol.selection-criteria ol li').click(function() {
$(this).addClass('highlight');
if($('ol.selection-criteria ol li').hasClass('highlight')) {
var test = $(this).html();
alert(test);
$('table.selection-items tbody tr:contains(#test)').css('background-color','#dddddd')
}
else {
}
});
});