【发布时间】：2021-03-19 22:19:49
【问题描述】：
我正在尝试通过 href 值进行适当的搜索，但是当我单击每个值时，它会显示空白表， 并且值的索引始终为0。我几乎尝试了所有方法，但都没有奏效。我认为主要问题出在脚本中，因为它总是向我显示每个元素的空白索引。
谁能告诉我我错过了什么？
代码如下：
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script> // This script is working
$(document).ready(function(){
$("#myInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#myTable tr").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
</script>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
.odd {
background: #5a95ee;
}
.even{
background: #7eb9e0;
}
</style>
</head>
<body>
<input id="myInput" type="text" placeholder="Search.." style="float: right; width: 500px;" value="">
<br><br>
<table>
<thead>
<tr>
<th>Predmet</th>
<th>Tip</th>
<th>Nastavnik</th>
<th>Grupe</th>
<th>Dan</th>
<th>Termin</th>
<th>Ucionica</th>
</tr>
</thead>
{% for raspored in rasporedi %}
<tbody id="myTable">
<tr class="{{ loop.cycle('odd', 'even') }}">
<td > {{raspored['predmet']}}</td>
<td>{{raspored['tip']}}</td>
<td >{{raspored['nastavnik']}}</td>
<td>{{raspored['grupe']}}</td> // Python list ( data from mongodb )
<td>{{raspored['dan']}}</td>
<td>{{raspored['termin']}}</td>
<td>{{raspored['ucionica']}}</td>
</tr>
</tbody>
{% endfor %}
</table>
<br> <br>
<table style="width: 400px;" style="margin:0 auto;">
<thead>
<tr >
<th>Nastavnik</th>
<th>Ucionica</th>
</tr>
</thead>
{% for raspored in dr %}
<tbody id="myTabledva">
<tr>
<td class="nastavnik {{ loop.cycle('odd', 'even') }}" > <a href="#" >{{raspored['nastavnik']}}</a></td>
<td class="ucionica {{ loop.cycle('odd', 'even') }}"> <a href="#" >{{raspored['ucionica']}}</a></td>
</tr>
</tbody>
<script> // Something is wrong with this script but i don't know what
$(document).on("click", ".nastavnik", function(){
var nastavnik = $("#myInput").val($(this).text());
$("#myTable tr").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(nastavnik) > -1 )
});
});
</script>
{% endfor %}
</table>
</body>
</html> <script> // Something is wrong with this script but i don't know what
$(document).on("click", ".nastavnik", function(){
var nastavnik = $("#myInput").val($(this).text());
$("#myTable tr").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(nastavnik) > -1 )
});
});
</script>
【问题讨论】：
-
欢迎来到 SO。你误解了
filter()的作用。您似乎相信它会显示/隐藏元素，这不是它的工作。它只是将一组匹配的元素过滤到一个子集。阅读its documentation。 -
谢谢。所以，如果过滤器不是一个propper函数，我应该用什么来显示表上的点击值（实时搜索）？
-
这是一个适当的功能 - 它只是没有按照您的想法执行。您需要在集合上过滤 then
show()或hide()。 -
所以我需要 show() 来代替切换？ $(this).toggle($(this).text().toLowerCase().indexOf(nastavnik) > -1 ) 它将是： $(this).show($(this).text().toLowerCase( ).indexOf(nastavnik) > -1 ) ?
-
不完全。您可能需要更多 jQuery 教程。你假设太多了，例如通过认为您可以将参数传递给
show()。 jQuery 通过链接来工作——首先你派生一个元素的集合，然后你通过链接一个方法来对它们做一些事情。所以： $('.some.selector').filter(function() { /* ... */ }).hide(), for example.toggle()` 等价于show()/hide()所以是的，你也可以使用它。
标签： jquery filter href clicking