jQuery：not（：contains）ACF selectフィールドでは動作しません/ <select><option>タグ/

Question

jQueryを使用する単純なフィルタ関数について助けを求めます。それを構築していない&開発者は私たちのためにもう働かない）、アイテムをフィルタリングし、アイテムを表示/非表示するdisplay：noneスタイルのクラスを割り当てるクラス。

オプションの一部（オプションタグのように）のみが動作し、一部のものは動作しないという問題があります。そしてなぜ私は理解できないように思える。すべてのコードは以下の通りです。事前に助けていただきありがとうございます。

PHP（ワードプレステンプレート）

<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()方法はに複雑なセレクタまたは変数をプッシュするよりも読みやすい選択肢をご提供することになります、と述べました。ほとんどの場合、より良い選択です。

だから、私はこれまで

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

、

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

、これを変更し、それが正常に動作しています。 "：not（）selector"と同様の問題を抱えている人のために私の答えを残しています。