答案 0 :(得分：0)
试试这个
var $indexSelect = $('#index__filter');
var $indexEntry = $('.index__entry');
$indexSelect.change(function() {
var selectedValue = $(this).val();
if (selectedValue == 'ALL') {
$indexEntry.css('color', 'black');
return;
}
$indexEntry.each(function(i, option) {
debugger;
var $tag = $(this).find('.tag');
var flag = true;
$tag.each(function(i, option) {
if (flag == true) {
if ($(this).html() == selectedValue) {
$(this).closest('ul').css('color', 'black');
console.log($(this).text());
flag = false;
} else {
$(this).closest('ul').css('color', 'lightgray');
}
}
});
});
});
答案 1 :(得分：0)
这是一个简单的工作代码。你正在做的是完全正确的，除了你需要为ul分配一个类并检查它。请尝试以下代码：
var $indexSelect = $('#index__filter');
var $indexEntry = $('.index__entry');
var $tag = $('.tag');
$indexSelect.change(function() {
$indexEntry.removeClass('selected');
var selectedValue = $(this).val();
if (selectedValue == 'ALL') {
$indexEntry.css('color', 'black');
return;
}
$tag.each(function(i, option) {
if (!$(this).closest('ul').hasClass('selected')) {
$(this).closest('ul').css('color', 'lightgray');
if ($(this).html() == selectedValue) {
$(this).closest('ul').css('color', 'black').addClass('selected');
//console.log($(this).text());
}
}
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<main>
<div class="index__container">
<section class="index">
<ul class="index__header">
<li>Project</li>
<li>Filter: <select id="index__filter">
<option selected="selected" value='ALL'>All</option>
<option value="Pedagogical Explorations">Pedagogical Explorations</option>
<option value="Research Production">Research Production</option>
<option value="Spatial Practice">Spatial Practice</option>
<option value="Exhibition">Exhibition</option>
</select></li>
<li>Year</li>
</ul>
<a href="">
<ul class="index__entry">
<li>Multiscale Strategies to Reactivate Transhumance in Spain</li>
<li>
<span class="tag">Spatial Practice</span>
</li>
<li>2017</li>
</ul>
</a>
<a href="">
<ul class="index__entry">
<li>Architecture after Speculation</li>
<li>
<span class="tag">Research Production</span>
</li>
<li>2017</li>
</ul>
</a>
<a href="">
<ul class="index__entry">
<li>Polyester Merino Chair</li>
<li>
<span class="tag">Spatial Practice</span>
</li>
<li>2017</li>
</ul>
</a>
<a href="">
<ul class="index__entry">
<li>1500 caracteres</li>
<li>
<span class="tag">Spatial Practice</span>
<span class="tag">Research Production</span>
</li>
<li>2017</li>
</ul>
</a>
<a href="">
<ul class="index__entry">
<li>Europan 13: Die Arbeitersiedlung</li>
<li>
<span class="tag">Spatial Practice</span>
</li>
<li>2015</li>
</ul>
</a>
<a href="">
<ul class="index__entry">
<li>Asymmetric Meta-Mapping</li>
<li>
<span class="tag">Pedagogical Explorations</span>
</li>
<li>2017</li>
</ul>
</a>
<a href="">
<ul class="index__entry">
<li>Chicago Architecture Biennial</li>
<li>
<span class="tag">Spatial Practice</span>
<span class="tag">Research Production</span>
<span class="tag">Exhibition</span></li>
<li>2015</li>
</ul>
</a>
</section>
</div>
答案 2 :(得分：0)
因为你循环遍历所有标签，并为每个标签设置了风格，它只会显示每个条目的最后一个标签的样式。
如果你为每个条目循环，而不是每个条目中的每个标签，你可以在找到与所选标签匹配的标签后突破循环。
// loop trough each entry
$indexEntry.each(function(i,entry){
// loop trough tag iwithin the entry
$( this ).find( '.tag' ).each(function(i, tag){
if ($(this).html() == selectedValue) {
$(this).closest('ul').css('color', 'black');
// exit this loop as soon as we've determined it should be black
return false;
} else {
$(this).closest('ul').css('color', 'lightgray');
}
})
})
$(function(){
// Filter Project Index
var $indexSelect = $('#index__filter');
var $indexEntry = $('.index__entry');
var $tag = $('.tag');
$indexSelect.change(function(){
var selectedValue = $(this).val();
if(selectedValue == 'ALL'){
$indexEntry.css('color', 'black');
return;
}
$indexEntry.each(function(i,entry){
$( this ).find( '.tag' ).each(function(i, tag){
if ($(this).html() == selectedValue) {
$(this).closest('ul').css('color', 'black');
return false;
console.log($(this).text());
} else {
$(this).closest('ul').css('color', 'lightgray');
}
})
})
});
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<main>
<div class="index__container">
<section class="index">
<ul class="index__header">
<li>Project</li>
<li>Filter: <select id="index__filter">
<option selected="selected" value='ALL'>All</option>
<option value="Pedagogical Explorations">Pedagogical Explorations</option>
<option value="Research Production">Research Production</option>
<option value="Spatial Practice">Spatial Practice</option>
<option value="Exhibition">Exhibition</option>
</select></li>
<li>Year</li>
</ul>
<a href="">
<ul class="index__entry">
<li>Multiscale Strategies to Reactivate Transhumance in Spain</li>
<li>
<span class="tag">Spatial Practice</span>
</li>
<li>2017</li>
</ul>
</a>
<a href="">
<ul class="index__entry">
<li>Architecture after Speculation</li>
<li>
<span class="tag">Research Production</span>
</li>
<li>2017</li>
</ul>
</a>
<a href="">
<ul class="index__entry">
<li>Polyester Merino Chair</li>
<li>
<span class="tag">Spatial Practice</span>
</li>
<li>2017</li>
</ul>
</a>
<a href="">
<ul class="index__entry">
<li>1500 caracteres</li>
<li>
<span class="tag">Spatial Practice</span>
<span class="tag">Research Production</span>
</li>
<li>2017</li>
</ul>
</a>
<a href="">
<ul class="index__entry">
<li>Europan 13: Die Arbeitersiedlung</li>
<li>
<span class="tag">Spatial Practice</span>
</li>
<li>2015</li>
</ul>
</a>
<a href="">
<ul class="index__entry">
<li>Asymmetric Meta-Mapping</li>
<li>
<span class="tag">Pedagogical Explorations</span>
</li>
<li>2017</li>
</ul>
</a>
<a href="">
<ul class="index__entry">
<li>Chicago Architecture Biennial</li>
<li>
<span class="tag">Spatial Practice</span>
<span class="tag">Research Production</span>
<span class="tag">Exhibition</span></li>
<li>2015</li>
</ul>
</a>
</section>
</div>