私は少し jQuery 初心者ですが、非常に基本的な質問に対する答えが見つかりません!
ユーザーがリスト内の単語をクリックできるシステムを作成しようとしています.jQueryはそのリスト項目の内容を取得し、それを変数に追加し、デモでは別のリストの項目に背景色を追加します.その単語を見つけます。
コードは問題なく変数を作成しているようで、変数の内容は正しいですが、セレクターの :contains(variable) 部分で変数の内容を使用することはできません。アルミニウムなどの単語を手動で追加すると、うまくいくようです。
これは言語の使用経験が浅いだけだと確信していますが、非常に複雑なシステムを見つけるために何日も Google をトロールしてきましたが、このような基本はありません。
以下から、変数に正しい文字列が含まれていることを確認するために alert(test) を使用していることがわかります。次に、その文字列を :contains(test) または (#test) に渡そうとしています。この文字列を含む table.selection-items の行を強調表示します。
どんなアイデアでも素晴らしいでしょう。初心者の質問ですみません！
ありがとう、サイモン
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 {
}
});
});