所以，我正在使用PHP，SQL和其他后端语言。我的客户希望在他的网站上获得动态过滤器。我在互联网上找到了一个脚本，但它没有用。
$(document).ready(function() {
$('.results > td').hide();
$('div.tags').find('input:checkbox').on('click', function() {
$('.results > td').hide();
$('div.tags').find('input:checked').each(function() {
$('.results > td.' + $(this).attr('rel')).show();
});
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box col-md-12 items tags">
<ul>
<li class="head">Producent</li>
<li>
<input id="producent1" type="checkbox" class="szukajnapraw Promise" rel="Promise" />Promise</li>
<li>
<input id="producent2" type="checkbox" class="szukajnapraw NetStor" rel="NetStor" />NetStor</li>
<li>
<input id="producent3" type="checkbox" class="szukajnapraw Stardom" rel="Stardom" />Stardom</li>
<li>
<input id="producent4" type="checkbox" class="szukajnapraw LaCie" rel="LaCie" />LaCie</li>
<li>
<input id="producent5" type="checkbox" class="szukajnapraw G-Tech" rel="G-Tech" />G-Tech</li>
<li>
<input id="producent6" type="checkbox" class="szukajnapraw mLogic" rel="mLogic" />mLogic</li>
<li>
<input id="producent7" type="checkbox" class="szukajnapraw Tiger Technology" rel="Tiger Technology" />Tiger Technology</li>
</ul>
</div>
表：
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>Producent</th>
<th>Produkt</th>
<th>Foto</th>
<th>Typ</th>
<th>Cena netto</th>
<th>Cena brutto</th>
<th>Interface</th>
<th>Ilość dysków</th>
<th>Pojemność</th>
<th>RAID</th>
<th>Wydajność</th>
<th>Opis</th>
<th>Specyfikacja</th>
<th>Zakup</th>
</tr>
</thead>
<tbody class="results">
<tr> <td>Tiger Technology</td><td>Macierz 123 TEST</td><td><img src="admin/forms/temp/ff.jpg" style = "width:50px;height:50px;"/></td><td>NAS Network Attached Storage</td><td>69.00</td><td>124.00</td><td>Thunderbolt2</td><td>60</td><td>5tb</td><td>0 1</td><td>Duża</td><td>dsadsadasdawderwasfcagfae</td><td><a href=http://www.google.pl target='_blank'>Specyfikacja producenta</a></td><td><form action='' method='POST'>
<input type='hidden' name='id' value='30' />
<input class='btn btn-primary btn-sm' type='submit' name='koszykAdd' value='Dodaj do koszyka'/></form></td></tr><tr> <td>Stardom</td><td>dsa</td><td><img src="admin/forms/temp/" style = "width:50px;height:50px;"/></td><td></td><td>1.00</td><td>1.00</td><td></td><td>4</td><td></td><td></td><td></td><td></td><td><a href=http://www.facebook.com target='_blank'>Specyfikacja producenta</a></td><td><form action='' method='POST'>
<input type='hidden' name='id' value='31' />
<input class='btn btn-primary btn-sm' type='submit' name='koszykAdd' value='Dodaj do koszyka'/></form></td></tr><tr> <td>G-Tech</td><td>vcxv</td><td><img src="admin/forms/temp/" style = "width:50px;height:50px;"/></td><td>DAS Direct Attached Storage</td><td>50.00</td><td>70.00</td><td>USB 3.0</td><td>5</td><td>400</td><td>5*5*</td><td>500</td><td>dsadsad</td><td><a href=http://www.o2.pl target='_blank'>Specyfikacja producenta</a></td><td><form action='' method='POST'>
<input type='hidden' name='id' value='34' />
<input class='btn btn-primary btn-sm' type='submit' name='koszykAdd' value='Dodaj do koszyka'/></form></td></tr><tr> <td>Tiger Technology</td><td>das sad</td><td><img src="admin/forms/temp/IMG_20150504_074450.jpg" style = "width:50px;height:50px;"/></td><td>SAN Srorage Area Network</td><td>50.00</td><td>70.00</td><td>eSATA</td><td>6</td><td>400</td><td>5/8/8</td><td>500</td><td>dasdasdsa</td><td><a href=http://www.nw.pl target='_blank'>Specyfikacja producenta</a></td><td><form action='' method='POST'>
<input type='hidden' name='id' value='35' />
<input class='btn btn-primary btn-sm' type='submit' name='koszykAdd' value='Dodaj do koszyka'/></form></td></tr><tr> <td>LaCie</td><td>Macierz</td><td><img src="admin/forms/temp/depositphotos_12071772-Website-Development-PHP-HTML-Arrows.jpg" style = "width:50px;height:50px;"/></td><td>SAN Srorage Area Network</td><td>98.00</td><td>120.00</td><td>miniSAS</td><td>6</td><td>4 TB</td><td>5</td><td>Duża</td><td>Tu powinien być opis, ale testuje i go nie wpisuje! </td><td><a href=http://www.google.pl target='_blank'>Specyfikacja producenta</a></td><td><form action='' method='POST'>
<input type='hidden' name='id' value='36' />
<input class='btn btn-primary btn-sm' type='submit' name='koszykAdd' value='Dodaj do koszyka'/></form></td></tr><tr> <td>LaCie</td><td>dsad</td><td><img src="admin/forms/temp/IMG_20150504_074450.jpg" style = "width:50px;height:50px;"/></td><td>SAN Srorage Area Network</td><td>50.00</td><td>70.00</td><td>Thunderbolt</td><td>8</td><td>400</td><td>8/8/8</td><td>500</td><td>fasdf</td><td><a href=http://fsdfsdf target='_blank'>Specyfikacja producenta</a></td><td><form action='' method='POST'>
<input type='hidden' name='id' value='37' />
<input class='btn btn-primary btn-sm' type='submit' name='koszykAdd' value='Dodaj do koszyka'/></form></td></tr><tr> <td>mLogic</td><td>test</td><td><img src="admin/forms/temp/ff.jpg" style = "width:50px;height:50px;"/></td><td>DAS Direct Attached Storage</td><td>80.00</td><td>100.00</td><td>Thunderbolt</td><td>8</td><td>900</td><td>5/8/8</td><td>600</td><td>fsdfd</td><td><a href=http://fsdfds target='_blank'>Specyfikacja producenta</a></td><td><form action='' method='POST'>
<input type='hidden' name='id' value='38' />
<input class='btn btn-primary btn-sm' type='submit' name='koszykAdd' value='Dodaj do koszyka'/></form></td></tr><tr> <td>Promise</td><td>Zdjęcie</td><td><img src="admin/forms/temp/depositphotos_12071772-Website-Development-PHP-HTML-Arrows.jpg" style = "width:50px;height:50px;"/></td><td>DAS Direct Attached Storage</td><td>4564.00</td><td>999999.99</td><td>Thunderbolt</td><td>4</td><td>5</td><td>1</td><td>300</td><td>SPrawdzam czy działaja fotki .... .... .. .. .. .</td><td><a href=http://feasd target='_blank'>Specyfikacja producenta</a></td><td><form action='' method='POST'>
<input type='hidden' name='id' value='39' />
<input class='btn btn-primary btn-sm' type='submit' name='koszykAdd' value='Dodaj do koszyka'/></form></td></tr> </tbody>
</table>
如果选中该复选框，我想显示他的rel或值。我还需要只显示表格单元格＆＃34; Producent＆＃34;是相关的。
我该怎么做？
答案 0 :(得分：6)
您需要检查第一个td的内容，而不是类
$(document).ready(function () {
$('.results > tr').hide();
$('div.tags').find('input:checkbox').on('click', function () {
$('.results > tr').hide();
$('div.tags').find('input:checked').each(function () {
$('.results > tr').has('td:first-child:contains("' + $(this).attr('rel')+'")').show();
});
});
});
演示：Fiddle
但更好的解决方案是更改标记，以便tr元素将值作为属性值，如<tr data-producent="G-Tech">
然后
$(document).ready(function () {
$('.results > tr').hide();
$('div.tags').find('input:checkbox').on('click', function () {
$('.results > tr').hide();
$('div.tags').find('input:checked').each(function () {
$('.results > tr[data-producent="' + $(this).attr('rel') + '"]').show();
});
});
});
演示：Fiddle