根据多个下拉菜单的选择显示具有特定 class 的多个元素

Question

我正在尝试根据多个下拉菜单的选择显示和隐藏具有特定 class 的多个 div 元素。

它当前设置为具有特定 class 的 1 个元素，它在使用 .siblings 时完全正常。然而，问题是，当多个 div 具有相同的 classes 时，它会停止工作。

这是 jquery 我正在使用：

jQuery(function($){
    var
        selects = $('#select-container select'),
        results = $('#results-container > div');
    
    selects.change(function(){        
        var values = '';
        selects.each(function(){
            values += '.' + $(this).val();
        });        
        results.filter(values).show().siblings().hide();
    });
});

HTML:

<div id='select-container'>
    <select>
        <option value='red'>Red</option>  
        <option value='blue'>Blue</option> 
        <option value='green'>Green</option>
    </select>
    <select>
        <option value='cat'>Cat</option>  
        <option value='dog'>Dog</option> 
        <option value='fish'>Fish</option>
    </select>
    <select>
        <option value='apple'>Apple</option>  
        <option value='banana'>Banana</option> 
        <option value='lemon'>Lemon</option>
    </select>
    <select>
        <option value='london'>London</option>  
        <option value='paris'>Paris</option> 
        <option value='newyork'>New York</option>
    </select>
</div>
<div id='results-container'>
    <div class="red cat apple london">Red Cat Apple London</div>
    <div class="blue dog apple paris">Blue Dog Apple Paris</div>
    <div class="blue dog apple paris">Blue Dog Apple Paris</div>
    <div class="blue dog apple paris">Blue Dog Apple Paris</div>
    <div class="blue fish banana newyork">Blue Fish Banana New York</div>
    <div class="green dog lemon london">Green Dog Lemon London</div>
    <div class="green cat banana newyork">Green Cat Banana New York</div>
    <!-- More divs with multiple combinations -->
</div>

CSS:

#results-container > div {
    display: none; 
}

就像我说的，这工作得很好 IF 只有一个 div 具有特定的 classes 集合。如果有多个 class 具有完全相同的组合，脚本将停止工作。

我怎样才能做到这一点，当有更多 div 具有相同的 class 组合时，它们会根据用户的选择显示和隐藏？

希望有人能帮帮我。

Answer 1

问题在于操作顺序、标记和 .siblings()

的行为

Get the siblings of each element in the set of matched elements

如果您的选择器 (values) 是 .blue.dog.apple.paris，那么 .filter(values) 将 return 三只 “蓝狗”。然后，当您对该集合调用 .siblings() 时，您将获得所有 "blue dogs".
的兄弟姐妹但是因为标记，他们都是彼此的兄弟姐妹。
因此 .siblings() return 中的所有元素 #results-container 和 .hide() 中的所有元素。

您可以先隐藏它们，只显示匹配选择器的元素

results.hide()
       .filter(values).show();

jQuery(function($) {
  var selects = $('#select-container select'),
    results = $('#results-container > div');

  selects.change(function() {
    var values = '';
    
    selects.each(function() {
      values += '.' + $(this).val();
    });
    
    results.hide()
           .filter(values).show();
  });
});

#results-container div {
  display: none
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='select-container'>
  <select>
    <option value='red'>Red</option>
    <option value='blue'>Blue</option>
  </select>
  <select>
    <option value='cat'>Cat</option>
    <option value='dog'>Dog</option>
  </select>
  <select>
    <option value='apple'>Apple</option>
    <option value='banana'>Banana</option>
  </select>
  <select>
    <option value='london'>London</option>
    <option value='paris'>Paris</option>
  </select>
</div>
<div id='results-container'>
  <div class="red cat apple london">Red Cat Apple London</div>
  <div class="blue dog apple paris">Blue Dog Apple Paris</div>
  <div class="blue dog apple paris">Blue Dog Apple Paris</div>
  <div class="blue dog apple paris">Blue Dog Apple Paris</div>
  <div class="blue fish banana newyork">Blue Fish Banana New York</div>
</div>

或者在隐藏它们之前从选择中排除匹配元素（例如 .not()）

results.filter(values).show()
       .siblings()
       .not(values).hide()

jQuery(function($) {
  var selects = $('#select-container select'),
    results = $('#results-container > div');

  selects.change(function() {
    var values = '';
    
    selects.each(function() {
      values += '.' + $(this).val();
    });
    
    results.filter(values).show()
           .siblings().not(values).hide();
  });
});

#results-container div {
  display: none
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='select-container'>
  <select>
    <option value='red'>Red</option>
    <option value='blue'>Blue</option>
  </select>
  <select>
    <option value='cat'>Cat</option>
    <option value='dog'>Dog</option>
  </select>
  <select>
    <option value='apple'>Apple</option>
    <option value='banana'>Banana</option>
  </select>
  <select>
    <option value='london'>London</option>
    <option value='paris'>Paris</option>
  </select>
</div>
<div id='results-container'>
  <div class="red cat apple london">Red Cat Apple London</div>
  <div class="blue dog apple paris">Blue Dog Apple Paris</div>
  <div class="blue dog apple paris">Blue Dog Apple Paris</div>
  <div class="blue dog apple paris">Blue Dog Apple Paris</div>
  <div class="blue fish banana newyork">Blue Fish Banana New York</div>
</div>

根据多个下拉菜单的选择显示具有特定 class 的多个元素

Showing multiple elements with a specific class depending on the selection of multiple dropdown menu's

jquery

dropdown