使用Wordpress插件高级自定义字段,我创建了一个页面来显示每个帖子的内容,因为页面非常重PHP并且依赖于数据库,所以我简化了代码,只显示生成的html。
在我的页面上有两个下拉列表,一个是“关联”和“规程”类别,当选择下拉列表时,我希望显示与关联和/或规程匹配的帖子。
例如,如果我选择Association:“Wales”,则应显示与Wales相关的所有内容,如果我希望在第二个下拉列表中更具体,则仅显示“Wales”和“Discipline Option 3”,如果两个选项都未选中,则显示所有文章。
因为有太多的字段,我很难让它工作,我希望它做的是如果.bio-field-text
中的文本匹配所选的选项,那么所有的.card-parent
div都将隐藏,只显示具有匹配选项的.card-parent
div。
我对jQuery的经验非常有限,所以我一直在寻找类似的问题,并尝试它们的解决方案,但没有成功。
这里有一个JSFiddle链接:https://jsfiddle.net/sjwmzk84/1/
任何帮助都将不胜感激。
$(document).ready(function() {
$("#association").change(function() {
$(this).find("option:selected").each(function() {
var optionValue = $(this).attr("value");
if (optionValue) {
$(".bio-field-text").not("." + optionValue).hide();
$("." + optionValue).show();
} else {
$(".bio-field-text").hide();
}
});
}).change();
});
.row {
width: 100%;
margin-left: auto;
margin-right: auto;
margin-top: 0;
margin-bottom: 0;
max-width: 67.5em;
*zoom: 1;
}
.row:before,
.row:after {
content: " ";
display: table;
}
.row:after {
clear: both;
}
.row.collapse .column,
.row.collapse .columns {
position: relative;
padding-left: 0;
padding-right: 0;
float: left;
}
.row .row {
width: auto;
margin-left: -0.9375em;
margin-right: -0.9375em;
margin-top: 0;
margin-bottom: 0;
max-width: none;
*zoom: 1;
}
.row .row:before,
.row .row:after {
content: " ";
display: table;
}
.row .row:after {
clear: both;
}
.row .row.collapse {
width: auto;
margin: 0;
max-width: none;
*zoom: 1;
}
.row .row.collapse:before,
.row .row.collapse:after {
content: " ";
display: table;
}
.row .row.collapse:after {
clear: both;
}
.column,
.columns {
position: relative;
padding-left: 0.9375em;
padding-right: 0.9375em;
width: 100%;
float: left;
}
@media only screen {
.column,
.columns {
position: relative;
padding-left: 0.9375em;
padding-right: 0.9375em;
float: left;
}
.small-5 {
position: relative;
width: 41.66667%;
}
.small-7 {
position: relative;
width: 58.33333%;
}
.small-12 {
position: relative;
width: 100%;
}
[class*="column"]+[class*="column"]:last-child {
float: right;
}
[class*="column"]+[class*="column"].end {
float: left;
}
}
/* Styles for screens that are atleast 768px; */
<link href="https://cdn.jsdelivr.net/npm/foundation-sites@6.4.3/dist/css/foundation.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="categoryfilter" id="association" data-tableId="card-parent">
<option>Association</option>
<option>Kent</option>
<option>Wales</option>
<option>Stafford</option>
</select>
<select name="categoryfilter" id="discipline" data-tableId="card-parent">>
<option>Discipline</option>
<option>Discipline Choice 1</option>
<option>Discipline Choice 2</option>
<option>Discipline Choice 3</option>
</select>
<div class="card-parent">
<h1 class="bio-card-title">
John & Peanuts </h1>
<div class="small-12 column biography-card-text">
<div class="row bio-card-row">
<div class="small-5 column">
<p class="bio-field-title">
Dog's name: </p>
</div>
<div class="small-7 column">
<p class="bio-field-text">
Peanuts </p>
</div>
</div>
<div class="row bio-card-row">
<div class="small-5 column">
<p class="bio-field-title">
Breed: </p>
</div>
<div class="small-7 column">
<p class="bio-field-text">
Pitbull </p>
</div>
</div>
<div class="row bio-card-row">
<div class="small-5 column">
<p class="bio-field-title">
Dog's age: </p>
</div>
<div class="small-7 column">
<p class="bio-field-text">
10 </p>
</div>
</div>
<div class="row bio-card-row">
<div class="small-5 column">
<p class="bio-field-title">
Handler: </p>
</div>
<div class="small-7 column">
<p class="bio-field-text">
John </p>
</div>
</div>
<div class="row bio-card-row">
<div class="small-5 column">
<p class="bio-field-title">
Association: </p>
</div>
<div class="small-7 column">
<p class="bio-field-text">
Stafford </p>
</div>
</div>
<div class="row bio-card-row">
<div class="small-5 column">
<p class="bio-field-title">
Discipline: </p>
</div>
<div class="small-7 column">
<p class="bio-field-text">
Discipline Choice 1 </p>
</div>
</div>
<div class="column bio-card-btm-content">
<p>Example text</p>
<div style="clear:both;"></div>
</div>
</div>
</div>
<div class="card-parent">
<h1 class="bio-card-title">
Alex & Ben </h1>
<div class="small-12 column biography-card-text">
<div class="row bio-card-row">
<div class="small-5 column">
<p class="bio-field-title">
Dog's name: </p>
</div>
<div class="small-7 column">
<p class="bio-field-text">
Ben </p>
</div>
</div>
<div class="row bio-card-row">
<div class="small-5 column">
<p class="bio-field-title">
Breed: </p>
</div>
<div class="small-7 column">
<p class="bio-field-text">
Labrador </p>
</div>
</div>
<div class="row bio-card-row">
<div class="small-5 column">
<p class="bio-field-title">
Dog's age: </p>
</div>
<div class="small-7 column">
<p class="bio-field-text">
12 </p>
</div>
</div>
<div class="row bio-card-row">
<div class="small-5 column">
<p class="bio-field-title">
Handler: </p>
</div>
<div class="small-7 column">
<p class="bio-field-text">
Alex </p>
</div>
</div>
<div class="row bio-card-row">
<div class="small-5 column">
<p class="bio-field-title">
Association: </p>
</div>
<div class="small-7 column">
<p class="bio-field-text">
Kent </p>
</div>
</div>
<div class="row bio-card-row">
<div class="small-5 column">
<p class="bio-field-title">
Discipline: </p>
</div>
<div class="small-7 column">
<p class="bio-field-text">
Discipline Choice 2 </p>
</div>
</div>
<div class="column bio-card-btm-content">
<p>Example text</p>
<div style="clear:both;"></div>
</div>
</div>
</div>
<div class="card-parent">
<h1 class="bio-card-title">
Kyle & Nougat </h1>
<div class="small-12 column biography-card-text">
<div class="row bio-card-row">
<div class="small-5 column">
<p class="bio-field-title">
Dog's name: </p>
</div>
<div class="small-7 column">
<p class="bio-field-text">
Nougat </p>
</div>
</div>
<div class="row bio-card-row">
<div class="small-5 column">
<p class="bio-field-title">
Breed: </p>
</div>
<div class="small-7 column">
<p class="bio-field-text">
Hound </p>
</div>
</div>
<div class="row bio-card-row">
<div class="small-5 column">
<p class="bio-field-title">
Dog's age: </p>
</div>
<div class="small-7 column">
<p class="bio-field-text">
7 </p>
</div>
</div>
<div class="row bio-card-row">
<div class="small-5 column">
<p class="bio-field-title">
Handler: </p>
</div>
<div class="small-7 column">
<p class="bio-field-text">
Kyle </p>
</div>
</div>
<div class="row bio-card-row">
<div class="small-5 column">
<p class="bio-field-title">
Association: </p>
</div>
<div class="small-7 column">
<p class="bio-field-text">
Wales </p>
</div>
</div>
<div class="row bio-card-row">
<div class="small-5 column">
<p class="bio-field-title">
Discipline: </p>
</div>
<div class="small-7 column">
<p class="bio-field-text">
Discipline Choice 3 </p>
</div>
</div>
<div class="column bio-card-btm-content">
<p>Example text</p>
<div style="clear:both;"></div>
</div>
</div>
</div>
最佳答案
在对您的代码进行了一些处理之后,下面是一个工作片段:
(我只修改了JS,它很短。请参阅注释。)
$("#association, #discipline").change(function() {
var associationOpt = $("#association").find("option:selected").text(); // Gets selected value for association
var disciplineOpt = $("#discipline").find("option:selected").text(); // Gets selected value for discipline
$(".card-parent").show(); // Shows all cards
$(".card-parent").each(function(index) { // Then, for each card…
if (!($(this).text().includes(associationOpt) && $(this).text().includes(disciplineOpt))) {
$(this).hide(); // … hides if one of the selected options isn't found
}
});
});
.row {
width: 100%;
margin-left: auto;
margin-right: auto;
margin-top: 0;
margin-bottom: 0;
max-width: 67.5em;
*zoom: 1;
}
.row:before,
.row:after {
content: " ";
display: table;
}
.row:after {
clear: both;
}
.row.collapse .column,
.row.collapse .columns {
position: relative;
padding-left: 0;
padding-right: 0;
float: left;
}
.row .row {
width: auto;
margin-left: -0.9375em;
margin-right: -0.9375em;
margin-top: 0;
margin-bottom: 0;
max-width: none;
*zoom: 1;
}
.row .row:before,
.row .row:after {
content: " ";
display: table;
}
.row .row:after {
clear: both;
}
.row .row.collapse {
width: auto;
margin: 0;
max-width: none;
*zoom: 1;
}
.row .row.collapse:before,
.row .row.collapse:after {
content: " ";
display: table;
}
.row .row.collapse:after {
clear: both;
}
.column,
.columns {
position: relative;
padding-left: 0.9375em;
padding-right: 0.9375em;
width: 100%;
float: left;
}
@media only screen {
.column,
.columns {
position: relative;
padding-left: 0.9375em;
padding-right: 0.9375em;
float: left;
}
.small-5 {
position: relative;
width: 41.66667%;
}
.small-7 {
position: relative;
width: 58.33333%;
}
.small-12 {
position: relative;
width: 100%;
}
[class*="column"]+[class*="column"]:last-child {
float: right;
}
[class*="column"]+[class*="column"].end {
float: left;
}
}
/* Styles for screens that are atleast 768px; */
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.4.3/dist/css/foundation.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="categoryfilter" id="association" data-tableId="card-parent">
<option>Association</option>
<option>Kent</option>
<option>Wales</option>
<option>Stafford</option>
</select>
<select name="categoryfilter" id="discipline" data-tableId="card-parent">>
<option>Discipline</option>
<option>Discipline Choice 1</option>
<option>Discipline Choice 2</option>
<option>Discipline Choice 3</option>
</select>
<div class="card-parent">
<h1 class="bio-card-title">
John & Peanuts </h1>
<div class="small-12 column biography-card-text">
<div class="row bio-card-row">
<div class="small-5 column">
<p class="bio-field-title">
Dog's name: </p>
</div>
<div class="small-7 column">
<p class="bio-field-text">
Peanuts </p>
</div>
</div>
<div class="row bio-card-row">
<div class="small-5 column">
<p class="bio-field-title">
Breed: </p>
</div>
<div class="small-7 column">
<p class="bio-field-text">
Pitbull </p>
</div>
</div>
<div class="row bio-card-row">
<div class="small-5 column">
<p class="bio-field-title">
Dog's age: </p>
</div>
<div class="small-7 column">
<p class="bio-field-text">
10 </p>
</div>
</div>
<div class="row bio-card-row">
<div class="small-5 column">
<p class="bio-field-title">
Handler: </p>
</div>
<div class="small-7 column">
<p class="bio-field-text">
John </p>
</div>
</div>
<div class="row bio-card-row">
<div class="small-5 column">
<p class="bio-field-title">
Association: </p>
</div>
<div class="small-7 column">
<p class="bio-field-text">
Stafford </p>
</div>
</div>
<div class="row bio-card-row">
<div class="small-5 column">
<p class="bio-field-title">
Discipline: </p>
</div>
<div class="small-7 column">
<p class="bio-field-text">
Discipline Choice 1 </p>
</div>
</div>
<div class="column bio-card-btm-content">
<p>Example text</p>
<div style="clear:both;"></div>
</div>
</div>
</div>
<div class="card-parent">
<h1 class="bio-card-title">
Alex & Ben </h1>
<div class="small-12 column biography-card-text">
<div class="row bio-card-row">
<div class="small-5 column">
<p class="bio-field-title">
Dog's name: </p>
</div>
<div class="small-7 column">
<p class="bio-field-text">
Ben </p>
</div>
</div>
<div class="row bio-card-row">
<div class="small-5 column">
<p class="bio-field-title">
Breed: </p>
</div>
<div class="small-7 column">
<p class="bio-field-text">
Labrador </p>
</div>
</div>
<div class="row bio-card-row">
<div class="small-5 column">
<p class="bio-field-title">
Dog's age: </p>
</div>
<div class="small-7 column">
<p class="bio-field-text">
12 </p>
</div>
</div>
<div class="row bio-card-row">
<div class="small-5 column">
<p class="bio-field-title">
Handler: </p>
</div>
<div class="small-7 column">
<p class="bio-field-text">
Alex </p>
</div>
</div>
<div class="row bio-card-row">
<div class="small-5 column">
<p class="bio-field-title">
Association: </p>
</div>
<div class="small-7 column">
<p class="bio-field-text">
Kent </p>
</div>
</div>
<div class="row bio-card-row">
<div class="small-5 column">
<p class="bio-field-title">
Discipline: </p>
</div>
<div class="small-7 column">
<p class="bio-field-text">
Discipline Choice 2 </p>
</div>
</div>
<div class="column bio-card-btm-content">
<p>Example text</p>
<div style="clear:both;"></div>
</div>
</div>
</div>
<div class="card-parent">
<h1 class="bio-card-title">
Kyle & Nougat </h1>
<div class="small-12 column biography-card-text">
<div class="row bio-card-row">
<div class="small-5 column">
<p class="bio-field-title">
Dog's name: </p>
</div>
<div class="small-7 column">
<p class="bio-field-text">
Nougat </p>
</div>
</div>
<div class="row bio-card-row">
<div class="small-5 column">
<p class="bio-field-title">
Breed: </p>
</div>
<div class="small-7 column">
<p class="bio-field-text">
Hound </p>
</div>
</div>
<div class="row bio-card-row">
<div class="small-5 column">
<p class="bio-field-title">
Dog's age: </p>
</div>
<div class="small-7 column">
<p class="bio-field-text">
7 </p>
</div>
</div>
<div class="row bio-card-row">
<div class="small-5 column">
<p class="bio-field-title">
Handler: </p>
</div>
<div class="small-7 column">
<p class="bio-field-text">
Kyle </p>
</div>
</div>
<div class="row bio-card-row">
<div class="small-5 column">
<p class="bio-field-title">
Association: </p>
</div>
<div class="small-7 column">
<p class="bio-field-text">
Wales </p>
</div>
</div>
<div class="row bio-card-row">
<div class="small-5 column">
<p class="bio-field-title">
Discipline: </p>
</div>
<div class="small-7 column">
<p class="bio-field-text">
Discipline Choice 3 </p>
</div>
</div>
<div class="column bio-card-btm-content">
<p>Example text</p>
<div style="clear:both;"></div>
</div>
</div>
</div>
希望有帮助。
关于jquery - jQuery如何通过下拉列表过滤内容,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/50024499/