时间戳

首页 > 解决方案 > jQuery 过滤器问题

jquery - jQuery 过滤器问题

问题描述

我有以下脚本：

_OnFilterChange() {
  var input, filter, ul, li, a, i;
  input = $("#courseFilter");
  filter = input.val();

  $('li').each(function() {
    a = $("#title").val();
    var current = $('li');

    if (a.indexOf(filter) > -1) {
      current.addClass("active");
    } else {
      current.removeClass("active");
    };
  });
}

该脚本旨在获取输入内容courseFilter并搜索列表中所有内容的标题li。如果存在匹配（部分或全部），则从匹配的特定类别中添加或删除活动类别li。

出于某种原因，它要么显示所有内容（当 没有文本时courseFilter），要么当我在框中键入任何内容时隐藏所有内容。

我认为它归结为选择li但不确定如何隔离li. 谁能指出我正确的方向？

编辑 - HTML

<div class="calendar-occasions__course-filter">
    <input type="text" id="courseFilter" placeholder="Start searching for your course..." title="Type in a name">
</div>


<ul id="gallery" class="calendar-occasions__occasions">
    <li class="calendar-occasions__occasion" id="event-@b" data-id="@b">
        <div class="calendar-occasions__occasion-outer" data-calendar-ocasion-id="@categoryEvent.Id">
            <div class="calendar-occasions__occasion-inner calendar-occasion" data-component="components/toggle-class" data-toggle-class__class-name="calendar-occasion--show-breakdown" data-sync-height-element-key="panel">
                <div class="calendar-occasion__header" data-sync-height-element-key="header">
                    <div class="calendar-occasion__header-left">
                        @if (categoryEvent.StartSession == null)
                        {
                        <span class="calendar-occasion__date">
                            @Html.DateString(categoryEvent.Start)
                        </span>
                        }
                        else
                        {
                    <span class="calendar-occasion__date">
                        @Html.DateString(categoryEvent.StartSession.Start)
                    </span>
                        }
                        @if (categoryEvent.ActiveSessions.Count > 1)
                        {
                        <a href="javascript:void(0);" class="calendar-occasion__breakdown" data-toggle-class__hit>Session<br>Breakdown</a>
                        }
                    </div>
                    <div class="calendar-occasion__header-right">

                        <h3 id="title" class="calendar-occasion__start-session">@categoryEvent.Title</h3>
                        <h3 class="calendar-occasion__location">Bridgend</h3>
                        <span class="calendar-occasion__time-span">@categoryEvent.StartSession.Start.ToString("h:mmtt") - @categoryEvent.StartSession.End.ToString("h:mmtt") </span>
                    </div>
                </div>
            </div>
        </div>
    </li>
</ul>

标签： jquery

解决方案

id 在页面上必须是唯一的，使用类而不是重复的 id。您可以使用$(this).

工作代码示例：

$("#filter").keyup(function(){
  var value = $(this).val();
  $("li.title").each(function(){
   ($(this).text().indexOf(value) > -1 && value != "") ? $(this).addClass("active") : $(this).removeClass("active");
  })
})
.active{
background-color:yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" placeholder="Seach in list" id="filter" />

<ul>
  <li class="title">a</li>
  <li class="title">ab</li>
  <li class="title">abc</li>
  <li class="title">abcd</li>
  <li class="title">abcde</li>
</ul>

推荐阅读