Question

我想找到一个脚本的小问题，并根据搜索显示不同的div。原始脚本是我找到并用于联系人列表的东西，我现在想要配置为执行其他操作。 Original code (JSFiddle)

我编辑的代码：

$('.Fruit').hide();
$('#search').click(function() {
  $('.Fruit').hide();
  var txt = $('#search-criteria').val();
  $('.Fruit').each(function() {
    if ($(this).id.toUpperCase().indexOf(txt.toUpperCase()) != -1) {
      $(this).show();
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<input type="text" id="search-criteria" />
<input type="button" id="search" value="search" />
<div class="Fruit" id="Apple">
  <h3>Some text about apples</h3>
</div>
<div class="Fruit" id="Orange">
  <h3>Some text about oranges</h3>
</div>

我不知道你是否理解我想要实现的目标......？在这种情况下，我有两个div - Apple和Orange。默认情况下两者都是隐藏的，但如果我在搜索字段中输入Apple并按下搜索按钮，则会显示div“Apple”，如果我搜索“Orange”，那么显然我想要“Orange”div节目。如果我搜索其他任何内容都不会显示，只要没有一个id与搜索词匹配的div。

所以基本上我正在尝试构建一个预加载内容的数据库，可以在不重新加载页面的情况下动态搜索和显示。

据我所知，当我尝试解决并将divs id与JS中第6行的searchword进行比较时，错误就是这样。有谁知道如何做到这一点，并使这项工作？或者是否有人有另一种可以执行此任务的解决方案？

Answer 1

问题是因为jQuery对象没有id属性。您需要使用prop('id')或this.id。

另请注意，您可以通过将id属性与小写匹配来改进逻辑，然后将输入转换为小写，然后您可以使用普通选择器，如下所示：

$('#search').click(function() {
  var txt = $('#search-criteria').val();
  if (txt)
    $('.fruit').hide().filter('#' + txt.toLowerCase()).show();
});

.fruit {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<input type="text" id="search-criteria" />
<input type="button" id="search" value="search" />
<div class="fruit" id="apple">
  <h3>Some text about apples</h3>
</div>
<div class="fruit" id="orange">
  <h3>Some text about oranges</h3>
</div>

根据搜索显示div

1 个答案: