jQuery :not (:contains) 不适用于 ACF 选择字段/<select><option> 标签/

Question

我想就一个使用 jQuery 的简单过滤器功能从你们那里获得一些帮助……我想这个用途（我没有构建它，开发人员不再为我们工作），类过滤项目并分配一个具有 display:none 样式的类来隐藏/显示项目。

问题在于只有一些选项（如选项标签中的选项）有效，而有些则无效。我似乎无法理解为什么。所有代码都在下面，非常感谢你们提前提供帮助。

php（wordpress 模板）

<div id="openings" class="row cantrevealcompanynamesorry-head" style="padding-top:50px;">
        <h2 style="">Current Openings</h2>
    </div>
    <div class="row careers-filter">
        <div class="col-md-6">
            <form id="filter-dept" action="">
                <label class="col-md-4">Sort by Department:</label>
                <select class="col-md-8 filter-dept" name="department">
                    <option value=""></option>
                    <option value="sales">Sales</option>
                    <option value="marketing">Marketing</option>
                    <option value="product">Product Management</option>
                    <option value="technology">Technology</option>
                    <option value="operations">Finance & Administration</option>
                    <option value="people-numbers">Customer Care</option>
                    <option value="business-dev">Business Development</option>
                </select>
            </form>
        </div>
        <div class="col-md-6">
            <form id="filter-loc" action="">
                <label class="col-md-4">Sort by Location:</label>
                <select class="col-md-8 filter-loc" name="location">
                    <option value=""></option>
                    <option value="hq">HQ</option>
                    <option value="northeast">United States · Northeast (Remote)</option>
                    <option value="various">Various (Remote)</option>
                    <option value="central-us">United States · Central US (Remote)</option>
                    <option value="southeast">United States · Southeast (Remote)</option>
                </select>
            </form>
        </div>
    </div>
    <div class="careers-listing">
        <div class="loading-overlay"></div>
        <?php if( have_rows('job_positions') ) :
            while ( have_rows('job_positions') ) : the_row();

                // display a sub field value
                $jtitle = get_sub_field('job_title');
                $jurl = get_sub_field('job_url');

                $jlfield = get_sub_field_object('job_location');
                $jlocation = get_sub_field('job_location');
                $jllabel = $jlfield['choices'][ $jlocation ];

                $jdfield = get_sub_field_object('job_department');
                $jdepartment = get_sub_field('job_department');
                $jdlabel = $jdfield['choices'][ $jdepartment ];

                $joverview = get_sub_field('job_overview');
            ?>
            <div class="row job-row <?php echo ''.$jlocation.' '.$jdepartment.''; ?>">
                <span class="job-dept"><?php echo $jdlabel; ?></span>

                <a class="job-title" href="<?php echo $jurl; ?>" target="_blank"><h3><?php echo $jtitle; ?></h3></a>

                <?php echo '<span class="job-meta">'.$jllabel.'</span>'; ?></span>
                <p><?php echo ''.$joverview.''; ?></p>
                <a class="job-button" target="_blank" href="<?php echo $jurl; ?>">Learn More</a>
                <div class="clear"></div>
            </div>
            <?php
            endwhile;

        else :

            echo '<h3 style="text-align:center;">No positions currently</h3>';

        endif;

        ?>
        <div class="row search-none"></div>
    </div>
</section>
<!--end .section-career-positions--> 

Javascript

$( ".careers-filter select" ).change(function() {
             var selectValue = $(this).val();
             if(selectValue !== ''){
            $('.loading-overlay').fadeIn(300, function(){
                   $('.job-row').removeClass('search-hide');
                   $('.careers-listing .search-none').empty();
                   $('.job-row:not(:contains(' + selectValue + '))').addClass('search-hide'); 
                   if (!$(".job-row").not(".search-hide").length) {
                        $('.careers-listing .search-none').text('No positions available');
                    }
                   $('.loading-overlay').fadeOut(300);
               });
             } else{
                 $('.loading-overlay').fadeIn(300, function(){
                   $('.job-row').removeClass('search-hide');
                   $('.loading-overlay').fadeOut(300);
                 });
             }
             if($(this).hasClass('filter-dept')){
                 $('.filter-loc').val('');`enter code here`
             } else if($(this).hasClass('filter-loc')){
                 $('.filter-dept').val('');
             }
        });

ACF 字段名称 *** 只有“销售”选项卡可以正常工作，但类名可以正确传递。这就是为什么我认为 javascript 是问题所在，并且 job_location 选项卡可以正常工作。

job_department

sales : Sales
marketing : Marketing
product : Product Management
technology : Technology
operations : Finance & Administration
people-numbers : Customer Care
business-dev : Business Development

job_location

hq : HQ
northeast : United States · Northeast (Remote)
various : Various (Remote)
central-us : United States · Central US (Remote)
southeast : United States · Southeast (Remote)

Answer 1

最后，我想通了（耶！！）。感谢http://api.jquery.com/not-selector/，当我查看该页面时，它说，

.not() 方法最终将为您提供比将复杂的选择器或变量推入 :not() 选择器过滤器更易读的选择。在大多数情况下，这是一个更好的选择。

所以，我改变了这个，

$('.job-row:not(:contains(' + selectValue + '))').addClass('search-hide');

到这里，

$( ".job-row" ).not( document.getElementsByClassName( selectValue ) ).addClass('search-hide');

而且它工作正常。对于与“：not（）选择器”有类似问题的人，我将在这里留下我的答案