Question

我有以下脚本：

_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>

Answer 1

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>

Answer 2

如Alexis所述，您需要使用$(this)：

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

  $('li').each(function() {
    a = $("#title").val();
    var current = $(this);  // <-- here, replace 'li' by this

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

这应该足以看到事情按照“li”的方式按预期工作。

请注意，变量a应设置在循环之外，因为其值不会因li而异。您的某些变量未使用，可以删除。设置变量也是一个好主意，因为它声明如下：

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

  $('li').each(function() {
    var current = $(this);  // <-- here, replace 'li' by this

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

jQuery过滤器问题

2 个答案: