jQuery: nicht (: enthält) funktioniert nicht mit ACF wähle field/<select><option> tag/

Question

Ich möchte Hilfe von euch Jungs auf einer einfachen Filterfunktion, die jQuery verwendet ... das verwendet, glaube ich (I habe es nicht gebaut & der Entwickler funktioniert nicht mehr für uns), Klasse, um Elemente zu filtern und eine Klasse zuzuweisen, die display: none style hat, um die Elemente zu verstecken/anzuzeigen.

Das Problem ist, dass nur einige der Optionen (wie Option Tag) funktionieren und einige nicht. Und ich kann nicht verstehen, warum. Alle Codes sind unten, ich schätze wirklich, dass Sie im Voraus helfen.

php (Wordpress-Vorlage)

<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 Feldnamen *** Nur "Sales" Registerkarte funktioniert, aber Klassennamen korrekt übergeben werden. Aus diesem Grund glaube ich, dass Javascript das Problem ist und die Registerkarte "job_location" korrekt funktioniert.

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

Schließlich habe ich es herausgefunden (yay !!). Dank http://api.jquery.com/not-selector/, wenn ich die Seite nach oben sah, sagte er,

Die .not() Methode am Ende werden Sie mit lesbarer Auswahl bereitstellt als Schub komplexe Selektoren oder Variablen in a: nicht() Bandfilter. In den meisten Fällen ist es eine bessere Wahl.

Also, ich änderte sich dies,

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

dazu

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

Und es ist richtig funktioniert. Ich lasse meine Antwort hier für Leute, die ähnliche Probleme mit ": not() selector" haben