[英]jQuery :not (:contains) not working with ACF select field / <select><option> tag /
我希望得到一些关于使用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)
最后,我想通了(耶!)。 感谢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()选择器”有类似问题的人
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.