Question

我需要帮助来过滤大量具有动态填充类名的填充div？

这是一个表单，当选择的选项需要隐藏没有indexOf div的类名的所有div

    <p>To narrow down the results, fill out the form below.</p>

    <!-- FORM -->
    <strong>Student/Teacher</strong>
    <select name="classification" id="classification">
        <option value="" selected>Select...</option>
        <option value="student">Student</option>
        <option value="teacher">Teacher</option>
    </select>
    <br /><br />
    <strong>Education Level</strong>
    <select name="level" id="level">
        <option selected>Select...</option>
        <option value="elementary">Elementary School</option>
        <option value="middle">Middle School</option>
        <option value="high">High School</option>
        <option value="college">College</option>
    </select>
    <br /><br />
    <strong>STEM Subject</strong>
    <select name="subject" id="subject">
        <option selected>Select...</option>
        <option value="science">Science</option>
        <option value="technology">Technology</option>
        <option value="engineering">Engineering</option>
        <option value="mathematics">Mathematics</option>
    </select> 
    <br /><br />
    <strong>Resource Type</strong>
    <select name="type" id="type">
        <option selected>Select...</option>
        <option value="sa">Scholarships & Awards</option>
        <option value="as">Academics Support</option>
        <option value="is">Industry Spotlights</option>
        <option value="ce">Career Exploration</option>
        <option value="cs">Career Spotlight</option>
        <option>Professional Organization Resource</option>   
    </select>             
    <br /><br />

    <div class="studentelementaryscienceas">
    <!-- text here -->
    </div>

div将使用不同的类名动态循环... 100的div循环并注入由数据库提供的集合类名称ex：teachermiddletechnologysa

<script language="javascript" type="text/javascript">

$('#classification').change(function(){
    var val = $(this).val();
    if (val == "student" & (this.className.indexOf(val) > -1)){
        $('div').hide();
        $('div[class$="'student'"]').show();
    }
    else {
        $('div').hide();
        $('div[class$="'teacher'"]').show();
    }
});
<!-- the rest is not exact just shorthand -->
$('#level').change(function(){
    var val = $(this).val();
    if (val == "elementary" & (this.className.indexOf(val) > -1)){
        $('div').hide();
        $('div[class$="'elementary'"]').show();
        }
    else {
        $('div').hide();
        $('div[class$="'middle'"]').show();
});

$('#subject').change(function(){
    var val = $(this).val();
    if (val == "science" & (this.className.indexOf(val) > -1)){
        $('div').hide();
        $('div[class$="'science'"]').show();
        }
    else {
        $('div').hide();
        $('div[class$="'technology'"]').show();
});

$('#type').change(function(){
    var val = $(this).val();
    if (val == "as" & (this.className.indexOf(val) > -1)){
        $('div').hide();
        $('div[class$="'as'"]').show();
        }
    else {
        $('div').hide();
        $('div[class$="'sa'"]').show();
});


</script>

Answer 1

有多个问题

正如@elclanrs所说&！= &&
您正在使用的属性选择器以错误结尾，因为可以在任何地方找到匹配项
您使用的组合类选择器也可能会产生意外结果。为什么不能将div的类作为<div class="student elementary science as"></div>
您的字符串连接（$('div[class$="'as'"]').show();）在语法上是错误的，它应该是$('div[class$="' + as +'"]').show();

尝试

var $divs = $('div');
var $filters = $('#classification, #level, #subject, #type').change(function () {
    var filter = $filters.map(function () {
        return this.value && this.value.indexOf('Select...') == -1 ? '[class*=' + this.value + ']' : undefined;
    }).get();
    $divs.hide()
    if (filter.length) {
        $divs.filter(filter.join('')).show()
    }
});

演示：Fiddle

如果您可以将类名称分隔为<div class="student elementary science as"></div>，那么

var $divs = $('div');
var $filters = $('#classification, #level, #subject, #type').change(function () {
    var filter = $filters.map(function () {
        return this.value && this.value.indexOf('Select...') == -1 ? '.' + this.value : undefined;
    }).get();
    $divs.hide()
    if (filter.length) {
        $divs.filter(filter.join('')).show()
    }
});

演示：Fiddle

按classname的indexOf过滤div

1 个答案: