我目前正在尝试使用shuffle.js的多过滤器。
我只能让一个过滤器工作，但我不能让多个过滤器工作。
我已经尝试了多个版本，但我看起来它总是过滤数据解决方案。
有没有一种方法可以使它不仅过滤数据解决方案，而且还过滤区域。在这个功能中，我甚至想添加更多的过滤器项目。shuffle.js中已经有一个codepen，但没有真正的解释。我无法让它工作：（
这是我的密码笔Link to codepen

<script src="https://cdnjs.cloudflare.com/ajax/libs/Shuffle/5.2.1/shuffle.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    
    <div id="product_archive">
      <div class="container white_bg">
    <div class="filters_container">
    <div class="btn-group btn-group-toggle" data-toggle="buttons" id="solution-options">
    
            <label class="btn btn-outline-primary">
              <input type="radio" class="input-none" name="shuffle-filter" value="all" checked=""><div class="filter_option_solution"><div class="image_div"></div>All</div>
            </label>
    
            <label class="btn btn-outline-primary">
              <input type="radio" class="input-none" name="shuffle-filter" value="Broiler Lighting" checked=""><div class="filter_option_solution"><div class="image_div"></div>Broilers</div>
            </label>
    
            <label class="btn btn-outline-primary">
              <input type="radio" class="input-none" name="shuffle-filter" value="Layer Lighting" checked=""><div class="filter_option_solution"><div class="image_div"></div>Layers</div>
            </label>
    
            <label class="btn btn-outline-primary">
              <input type="radio" class="input-none" name="shuffle-filter" value="Breeder Lighting" checked=""><div class="filter_option_solution"><div class="image_div"> </div>Breeders</div>
            </label>
    
            <label class="btn btn-outline-primary">
              <input type="radio" class="input-none" name="shuffle-filter" value="Pullet lighting" checked=""><div class="filter_option_solution"><div class="image_div">
              </div>Pullet</div>
            </label>
    
            <label class="btn btn-outline-primary">
              <input type="radio" class="input-none" name="shuffle-filter" value="Swine Lighting" checked=""><div class="filter_option_solution"><div class="image_div">
        
              </div>Swine</div>
            </label>
    
          </div>
    
    
    <div class="region filter">
      <div class="region_group" id="region-options">
        <input type="radio" id="europe" name="region" value="europe">
        <label for="europe">Europe</label>
        
        <input type="radio" id="us" name="region" value="us">
        <label for="javascript">US</label>
      </div>
    </div>
    
    </div>
        <div clas="product_grid js-shuffle" id="product_grid">
    
    
        <div class="product_grid_item shuffle-item" data-solutions="[&quot;Broiler Lighting&quot;,&quot;Layer Lighting&quot;,&quot;Pullet lighting&quot;,&quot;Swine Lighting&quot;]" data-region="[&quot;Europe&quot;]">
           <div class="product_grid_item_container" >
            <div class="image_product_item"></div>
            <a href="/test">Item1</a>
          </div>
        </div>
        <div class="product_grid_item shuffle-item" data-solutions="[&quot;Broiler Lighting&quot;,&quot;Layer Lighting&quot;,&quot;Swine Lighting&quot;]" data-region="[&quot;US&quot;]">
           <div class="product_grid_item_container" >
            <div class="image_product_item"></div>
            <a href="/test">Item2</a>
          </div>
        </div>
        <div class="product_grid_item shuffle-item" data-solutions="[&quot;Broiler Lighting&quot;]" data-region="[&quot;US&quot;]">
           <div class="product_grid_item_container" >
            <div class="image_product_item"></div>
            <a href="/test">Item2</a>
          </div>
        </div>
    
          
      </div>
    </div>

<script>
const Shuffle = window.Shuffle;
const element = document.getElementById('product_grid');
const sizer = element.querySelector('.js-shuffle-sizer');

const shuffleInstance = new Shuffle(element, {
  itemSelector: '.product_grid_item',
  sizer: sizer,
  buffer: 1,
});

let selectedSolutions = [];
let selectedRegions = [];

jQuery('input[name="shuffle-filter"]').on('change', function (evt) {
  var input = evt.currentTarget;
  if (input.checked) {
    selectedSolutions.push(input.value);
  } else {
    var index = selectedSolutions.indexOf(input.value);
    if (index !== -1) {
      selectedSolutions.splice(index, 1);
    }
  }

  // Apply combined filtering
  shuffleInstance.filter(function (element) {
    const solutions = JSON.parse(element.getAttribute('data-solutions'));
    const regions = JSON.parse(element.getAttribute('data-region'));
    const solutionFilter = selectedSolutions.length === 0 || selectedSolutions.some(s => solutions.includes(s));
    const regionFilter = selectedRegions.length === 0 || selectedRegions.includes(regions[0]);
    return solutionFilter && regionFilter;
  });
});

jQuery('input[name="region"]').on('change', function (evt) {
  var input = evt.currentTarget;
  if (input.checked) {
    selectedRegions.push(input.value);
  } else {
    var index = selectedRegions.indexOf(input.value);
    if (index !== -1) {
      selectedRegions.splice(index, 1);
    }
  }

  // Apply combined filtering
  shuffleInstance.filter(function (element) {
    const solutions = JSON.parse(element.getAttribute('data-solutions'));
    const regions = JSON.parse(element.getAttribute('data-region'));
    const solutionFilter = selectedSolutions.length === 0 || selectedSolutions.some(s => solutions.includes(s));
    const regionFilter = selectedRegions.length === 0 || selectedRegions.includes(regions[0]);
    return solutionFilter && regionFilter;
  });
});
</script>