Question

我正在处理过滤脚本，我需要一些帮助。

我的问题是，如何检查选择了哪些过滤器（页面重新加载时保持选中状态/从其他页面返回）并在页面重新加载时运行过滤脚本？

页面为：https://www.raw-partner.de/wer-wir-sind/team-2/

用户交互正在加载页面-单击“过滤器”-选择用户所需的复选框/过滤器-单击重定向到其他页面的条目-返回时必须使用相同的过滤器。（请注意：以前选中的复选框一旦返回将保持选中状态，因此唯一要做的就是再次运行脚本）

我也可以发布脚本。

关于如何实现此目标的任何想法？预先感谢！

HTML：

<ul class="filters box">
    <li>
        <input name="is-partner" type="checkbox" value="partner" id="partner" />
        <label for="partner">Partner</label>
    </li>
<li>
        <input name="other-job" type="checkbox" value="berufstrager" id="berufstrager" />
        <label for="berufstrager"> Berufsträger </label>
    </li>
<li>
        <input name="other-job" type="checkbox" value="mitarbeiter" id="mitarbeiter" />
        <label for="mitarbeiter"> Mitarbeiter </label>
    </li>

</ul>

<ul class="filters box">
<li style="font-weight: bold"> Standorte </li>
<li>
        <input name="location" type="checkbox" value="munchen" id="munchen" />
        <label for="munchen"> München </label>
    </li>
<li>
        <input name="location" type="checkbox" value="berlin" id="berlin" />
        <label for="berlin">Berlin</label>
    </li>
<li>
        <input name="location" type="checkbox" value="bad-worishofen" id="bad-worishofen" />
        <label for="bad-worishofen">Bad Wörishofen</label>
    </li>
<li>
        <input name="location" type="checkbox" value="gera" id="gera" />
        <label for="gera">Gera</label>
    </li>
</ul>


<ul class="filters box">
<li style="font-weight: bold"> Partner mit Team </li>
<li>
        <input name="parner-team" type="checkbox" value="appelt-duile" id="appelt-duile" />
        <label for="appelt-duile"> Appelt/Duile </label>
    </li>
<li>
        <input name="parner-team" type="checkbox" value="bley" id="bley" />
        <label for="bley"> Bley </label>
    </li>
<li>
        <input name="parner-team" type="checkbox" value="dietrich-kogler" id="dietrich-kogler" />
        <label for="dietrich-kogler"> Dietrich/Kögler </label>
    </li>
<li>
        <input name="parner-team" type="checkbox" value="barth" id="barth" />
        <label for="barth"> Dr. Barth </label>
    </li>
<li>
        <input name="parner-team" type="checkbox" value="buck" id="buck" />
        <label for="buck"> Dr. Buck </label>
    </li>
<li>
        <input name="parner-team" type="checkbox" value="drost" id="drost" />
        <label for="drost"> Drost </label>
    </li>
<li>
        <input name="parner-team" type="checkbox" value="lux-kronig-harbauer" id="lux-kronig-harbauer" />
        <label for="lux-kronig-harbauer"> Lux-Krönig/Harbauer </label>
    </li>
<li>
        <input name="parner-team" type="checkbox" value="metzler" id="metzler" />
        <label for="metzler"> Metzler </label>
    </li>
<li>
        <input name="parner-team" type="checkbox" value="stegmann" id="stegmann" />
        <label for="stegmann"> Stegmann </label>
    </li>
</ul>


</div>

</div>

<div id="filtering">

<div class="entry" data-id="max-appelt" data-category="partner munchen berufstrager appelt-duile">
<a href="http://www.raw-partner.de/maximilian-appelt-4/" target="_blank"><p><img class="" src="/wp-content/uploads/2018/08/Appelt_P_0613_Zuschnitt.png" alt="null" /></p>
<h3 id="name"><b>Maximilian <br> Appelt</b></h3></a>
</div>

<div class="entry" data-category="partner munchen berufstrager barth">
<a href="http://www.raw-partner.de/dr-hans-guenther-barth/" target="_blank"><p><img class="" src="/wp-content/uploads/2018/08/Barth_P_0187_Zuschnitt.png" alt="null" /></p>
<h3 id="name"><b>Dr. Hans Günther Barth</b></h3></a>
</div>

<div class="entry" data-category="munchen mitarbeiter ">

<a href="http://www.raw-partner.de/katrin-bartl-3/" target="_blank"><p><img class="" src="/wp-content/uploads/2018/08/Bartl_0820_F_Zuschnitt.png" alt="null" /></p>
<h3 id="name"><b>Katrin <br> Bartl</b></h3></a>

</div>

<div class="entry" data-id="hans" data-category="bad-worishofen mitarbeiter stegmann">

<a href="http://www.raw-partner.de/alexander-baumgaertner-2/"><p><img class="" src="/wp-content/uploads/2018/08/Baumgärtner_0035_F2.png" alt="null" /></p>
<h3 id="name"><b>Alexander <br> Baumgärtner</b></h3></a>

</div>

<div class="entry" data-id="hans" data-category="bad-worishofen mitarbeiter">

<a href="http://www.raw-partner.de/margit-baur-3/"><p><img class="" src="/wp-content/uploads/2018/08/Baur_0533_F_Zuschnitt.png" alt="null" /></p>
<h3 id="name"><b>Margit <br> Baur</b></h3></a>

</div>

<div class="entry" data-id="hans" data-category="bad-worishofen mitarbeiter">

<a href="http://www.raw-partner.de/peter-harbauer-3-7/"><p><img class="" src="/wp-content/uploads/2018/08/Bernhardt_0137_Zuschnitt.png" alt="null" /></p>
<h3 id="name"><b>Yvonne <br> Bernhardt</b></h3></a>

</div>

jQuery：

(function($){ 
    var $filterCheckboxes = $('input[type="checkbox"]');

    $filterCheckboxes.on('change', function() {

      var selectedFilters = {};

      $filterCheckboxes.filter(':checked').each(function() {

        if (!selectedFilters.hasOwnProperty(this.name)) {
          selectedFilters[this.name] = [];
        }

        selectedFilters[this.name].push(this.value);

      });

      var $filteredResults = $('.entry');

      $.each(selectedFilters, function(name, filterValues) {

        $filteredResults = $filteredResults.filter(function() {

          var matched = false,
            currentFilterValues = $(this).data('category').split(' ');

          $.each(currentFilterValues, function(_, currentFilterValue) {

            if ($.inArray(currentFilterValue, filterValues) != -1) {
              matched = true;
              return false;
            }
          });

          return matched;

        });
      });

      $('.entry').hide().filter($filteredResults).show();

    });

    $(window).trigger('resize')
      })(jQuery);

JSFiddle：https://jsfiddle.net/u39kmoxz/2/

注意：我对jQuery有基本的了解，还不够高级，无法使用cookie，因此我想，由于返回时复选框仍处于选中状态，因此唯一要做的就是重新运行脚本，但是我可以因为脚本是在变更中应用的，所以不知道。

Answer 1

欢迎！

从概念上讲，您需要从2个事件中调用该函数：更改复选框+页面加载。因此，您需要命名该函数，以便可以从这两个事件中调用它。

0.85.0

调整jquery过滤脚本以基于选中的复选框在页面重新加载时运行

1 个答案: