Question

我已经找到了很多关于如何在表上使用jQuery过滤器的示例，但我无法找到如何在不在表内的项目上执行此操作。例如，我有卡片，我必须搜索。

我试图改编this w3schools example的代码，当我输入'second'这个词而不是'first'这个词时它似乎有用。

$(document).ready(function() {
            $("#txtSearch").on("keyup", function() {
                var value = $(this).val().toLowerCase();
                $("#milestoneCard").filter(function() {
                    $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
                });
            });
        });

我想知道这是否可能，如果是的话，我必须改变。

我搜索了很多，虽然我确信这是可能的，但我似乎无法找到我的情况。

我已在以下jsfiddle

中复制了它

Answer 1

您对两个组件使用相同的id 将其更改为class="col-md-4 milestoneCard"，将您的选择器更改为$(".milestoneCard")，这样就可以了 id属性在整个页面中应该是唯一的，而选择器只会抓取它找到的第一个属性。

Answer 2

页面上有多个相同的ID。因此JS将无法按预期工作。 ID是唯一的，类可以重复。

要解决此问题，请尝试将milestoneCard设为类，而不是html中的id，如此处所示

HTML

<input type="search" id="txtSearch">
<div class="col-md-4 milestoneCard">
    <div class="card card-body bg-light" style="margin-bottom: 1em;">
        <h3 id="searchTitle">First</h3>
        <p>{{description}}</p>
        <p>Due date:{{dueDate}}</p>
        <p>Completed date:{{compDate}}</p>
        <form action="/plannerHomepage" method="POST">
            <input type="hidden" name="compId" value="{{id}}">
            <input type="submit" role="button" class="btn btn-primary btn-lg" value="completed" style="margin-top:1em;" />
        </form>
    </div>
</div>
<div class="col-md-4 milestoneCard">
    <div class="card card-body bg-light" style="margin-bottom: 1em;">
        <h3 id="searchTitle">Second</h3>
        <p>{{description}}</p>
        <p>Due date:{{dueDate}}</p>
        <p>Completed date:{{compDate}}</p>
        <form action="/plannerHomepage" method="POST">
            <input type="hidden" name="compId" value="{{id}}">
            <input type="submit" role="button" class="btn btn-primary btn-lg" value="completed" style="margin-top:1em;" />
        </form>
    </div>
</div>

和你的JavaScript

$(document).ready(function() {
    $("#txtSearch").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $(".milestoneCard").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});

或查看jsfiddle here

在表元素之外使用jQuery过滤器

2 个答案: