Question

我正在尝试根据字符串中的某些单词（在本例中为城市名称）过滤列表项。该列表位于foreach循环内，包含约45个列表项（即城市名称-一些文本），这些列表项是通过Wordpress添加的。

我在包含城市名称作为选项的列表之前添加了<select>元素。是否可以过滤出不包含所选值的列表项？

我有一个基于类的过滤器。

(function filterContent() {
     var location = document.getElementById("location-select").value;

        if(location=="all") {
          jQuery(".list-item").css("display","block");
      } else {
          jQuery(".list-item."+location).css("display","block");
          jQuery(".list-item:not(."+location+")").css("display","none");
      }
});

但是，由于不能将特定的类分别添加到每个列表项中，因为它位于foreach循环中，因此我认为这不是最佳解决方案。

这是如何设置<select>元素的示例：

<div class="location-filter">
    <select id="location-select" name="locationselect" 
    onchange="filterContent();">
        <option value="all" selected>All locations</option>
        <option value="city">City</option>
        <option value="cityname">City Name</option>
    </select>
</div>

以及php中的列表：

<div class="list">
    <a class="list-item"><?php echo $list-item-text ?></a>
</div>

Answer 1

对于任何有类似问题并且不想公开的人，我将在这里保留我的解决方案来过滤内容。

最终变得非常简单。这样做只是检查选项值和每个列表项内容之间是否有相似性，然后仅返回具有匹配值的项。这也适用于文本输入字段。

希望这会有所帮助！

$(document).ready(function(){
  
  $("#location-select").change(function(){
        // Retrieve the option value and reset the count to zero
        var locationSelect = $(this).val(), count = 0;
        $(".list-item").each(function(){
            // If the list item does not match the value remove it from the results
            if ($(this).text().search(new RegExp(locationSelect, "i")) < 0) {
                $(this).css("display", "none");
            // Show the list item if the value matches and increase the count by 1
            } else {
                $(this).css("display", "block");
                count++;
            }
        });
        // Update the count
        var numberItems = count;
        $("#filter-select-count").text("Results = "+count);
    });
});

.list a.list-item {
  display: block;
  padding: 10px;
  border-bottom: solid 1px black;
  text-decoration: none;
  color: black
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="location-select" name="locationselect">
  <option value="Sidneystad">Sidneystad</option>
  <option value="North Jaedenport">North Jaedenport</option>
  <option value="Lake">Lake</option>
</select>
<span id="filter-select-count"></span>

<div class="list">
  <a href="#" class="list-item">
    Sidneystad - Description
  </a>
  <a href="#" class="list-item">
    North Jaedenport - Description
  </a>
  <a href="#" class="list-item">
    Lake Titusville - Description
  </a>
  <a href="#" class="list-item">
    Lake West - Description
  </a>
</div>

根据HTML内容过滤某些单词的列表项

1 个答案: