Question

我一直在研究jQuery中的过滤器功能，以获得一个简单的无序列表。每个列表都在一个带有过滤器的块内，可以在后端（Wordpress）中对其进行修改以过滤掉特定的字符串。过滤器还具有一个重置按钮，可将其设置回原始状态。

现在，我被要求将其重复列出。重复列表本身不是问题，但是过滤器现在可以过滤掉所有现有列表中的项目。

因此，过滤器确实可以工作，但过滤掉所有具有类filter-list_item的元素时会有些过分兴奋。我认为在每个循环的父div上的类中添加一个数字，然后在jQuery中添加一个for循环以定位这些特定的类将解决此问题。因此，$list_count和listCount变量。但是，这完全相同，并且仍会影响所有列表。我不知道为什么。我们将不胜感激如何使它仅过滤相应列表中的项目。

这是过滤器功能的当前jQuery：

$(document).ready(function (){

// Content filter
var lists = $(".filter-list").length;

for(var listCount = 0; listCount < lists; ) {

    $(".filter-list-"+listCount).find(".content-filter").change(function() {
      // Retrieve the option value and reset the count to zero
      var search = $(this).val(), count = 0;

      $(".filter-list_item").each(function(){
        // Remove item if it does not match the value
        var string = this.innerText;
        var found = strSearch(search.toLowerCase(), string.toLowerCase());

        if (found) {
          $(this).css("display", "block");
          // Show the list item if the value matches and increase the count by 1
          count++;
        } else {
          $(this).css("display", "none");
        }

        // Show reset button
        if($(this).index() > 0) {
          $(".filter-reset").addClass("active");
        }
      });

      // Update the count
      if(count == 0) {
        $(".filter-select-results").text("No results for " +search);
      } else if(count > 0) {
        $(".filter-select-results").text('');
      }
    });

    // Reset filter
    $(".filter-reset").click(function() {
      $(".content-filter").prop('selectedIndex',0);
      $(".filter-list_item").css("display", "block");
      $(".filter-reset").removeClass("active");
      $(".filter-select-results").text('');
    });

    listCount++;
}
});

// Search function
function strSearch(search, string) {
  var n = string.search(search);

  if(n >= 0) {
      return true;
  }

  return false;
}

这是用于构建列表的PHP

<?php
$list_count = 0;
foreach ($layout['list'] as $list) { ?>
    <div class="container filter-list filter-list-<?php echo $list_count++; ?>">
        <div class="title-wrapper">
            <h2><?php echo $list['title']; ?></h2>
            <?php echo $list['description'];

            // Content filter
            if($list['content_filter'] == true) { ?>
                <div class="filter-container">
                    <button class="filter-reset"><i class="fa-icon fa fa-undo"></i></button>
                    <select class="content-filter" name="filterselect">
                        <option value="all" disabled selected>Selecteer een locatie</option>
                        <?php foreach($list['filter_options'] as $filter) { ?>
                            <option value="<?php echo $filter['option']; ?>"><?php echo $filter['option']; ?></option>
                        <?php } ?>
                    </select>
                </div>
            <?php } ?>
        </div>
        <div class="filter-select-results"></div>
        <ul class="filter-list_items">
            <?php foreach($list['list_items'] as $list_item) { ?>
                <?php if( $list_item['link'] ) { ?>
                    <li class="filter-list_item"><a href="<?php echo $list_item['link']; ?>" class="<?php echo $filterClass ?>"><?php echo $list_item['item']; ?></a></li>
                <?php } else { ?>
                    <li class="filter-list_item">
                        <span><?php echo $list_item['item']; ?></span>
                    </li>
                <?php } ?>
            <?php } ?>
        </ul>
    </div>

Answer 1

将$(".filter-list_item").each(function(){替换为$(this).closest(".filter-list").find(".filter-list_item").each(function(){

这是假设.content-filter元素是.filter-list的一部分。 closest然后导航到满足条件的第一个父级。从显示的php代码中还不清楚该条件是否成立。

如何制作独立的重复jQuery函数

1 个答案: