多下拉菜单选择触发批量显示隐藏相同类名div的jQuery实现问题

问题原因 #

你现有代码的问题出在siblings()方法的调用逻辑上：当你筛选出多个匹配类组合的div后，链式调用.siblings().hide()时，多个匹配元素之间互为兄弟节点，会被互相判定为需要隐藏的其他元素，最终导致所有匹配元素被互相隐藏，只有单匹配项时才不会触发这个问题。

解决方案 #

调整显示隐藏的执行顺序：先隐藏所有结果div，再单独把匹配筛选条件的div显示出来即可，完全不需要操作siblings节点。

修改后的jQuery代码 #

jQuery(function($){
    var
        selects = $('#select-container select'),
        results = $('#results-container > div');
    
    selects.change(function(){        
        var values = '';
        selects.each(function(){
            values += '.' + $(this).val();
        });        
        // 先隐藏所有结果
        results.hide();
        // 只显示匹配的结果
        results.filter(values).show();
    });
});

效果验证 #

修改后无论有多少个相同类组合的div，只要匹配下拉选择的类组合，都会被统一显示，其余不匹配的div保持隐藏，符合需求。

内容的提问来源于stack exchange，提问作者Quincy Norbert