Jquery下拉筛选器

Question

当我选择按国家筛选时，它不起作用。下面是我的代码。我需要根据下拉选择筛选文章。我尝试了下面的脚本，但没有得到结果。请帮助解决这个筛选。如果我还需要任何其他可能的方法，也需要java脚本方法。此外，如果我单击所有国家，意味着所有数据都应该可见。

<div class="searched-articles" style="border:1px solid #000;">
<a href="#/testing-2/">
<div class="col-md-2 col-sm-2 float-left author-date">
<span class="date">03-01-2022</span>   
</div>
<div class="col-md-6 col-sm-6 float-left heading">
<h4>Testing</h4>
<span class="global" data-type="India">India</span>        
</div>
</a>
</div><br>
<div class="searched-articles" style="border:1px solid #000;">
<a href="#/test3-2/">
<div class="col-md-2 col-sm-2 float-left author-date">
<span class="date">29-12-2021</span>   
</div>
<div class="col-md-6 col-sm-6 float-left heading">
<h4>BlazeDream Test3</h4>
<span class="global" data-type="India">India</span>        
</div>
</a>
</div><br>
<div class="searched-articles" style="border:1px solid #000;">
<a href="#/2/">
<div class="col-md-2 col-sm-2 float-left author-date">
<span class="date">29-12-2021</span>   
</div>
<div class="col-md-6 col-sm-6 float-left heading">
<h4>BlazeDreamTest2</h4>
<span class="global" data-type="America">America</span>        
</div>
</a>
</div><br>
<div class="searched-articles" style="border:1px solid #000;">
<a href="#/news2/">
<div class="col-md-2 col-sm-2 float-left author-date">
<span class="date">30-11-2021</span>   
</div>
<div class="col-md-6 col-sm-6 float-left heading">
<h4>News2</h4>
<span class="global" data-type="America">America</span>
</div>
</a>
</div><br>
<div class="searched-articles" style="border:1px solid #000;">
<a href="#/test3/">
<div class="col-md-2 col-sm-2 float-left author-date">
<span class="date">27-11-2021</span>   
</div>
<div class="col-md-6 col-sm-6 float-left heading">
<h4>test3</h4>
<span class="global" data-type="India">India</span>        
</div>
</a>
</div><br>
<div>
<select class="mdl-selectfield__select" id="countries" name="countries">
<option value="All Countries">All Countries</option>    
<option value="India">India</option>
<option value="America">America</option>    
</select>
</div>

$(document).ready(function(){
$("#countries").change(function() {
var filter = $("#countries").val().toLowerCase();
var ctr = $(".searched-articles"); 
var ctr1 = $(".searched-articles").text(); 
var data = $(".heading span").attr('data-type').toLowerCase();

ctr.each(function(i) {
if( data == filter) {
ctr.show();
} else{
ctr.hide()
}
})
});
});

Answer 1

您的代码中存在多个问题，1是数据不能表示每个ctr中存在的跨度。

试试这个：

$(document).ready(function() {
$("#countries").change(function() {
var filter = $("#countries").val().toLowerCase();
$(".searched-articles").hide();
$(".searched-articles").filter(function() {
return $(this).find(".global").attr("data-type").toLowerCase() == filter;
}).show();
});
});

演示

$(document).ready(function() {
$("#countries").change(function() {
var filter = $("#countries").val().toLowerCase();
$(".searched-articles").hide();
$(".searched-articles").filter(function() {
return $(this).find(".global").attr("data-type").toLowerCase() == filter;
}).show();
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="searched-articles" style="border:1px solid #000;">
<a href="#/testing-2/">
<div class="col-md-2 col-sm-2 float-left author-date">
<span class="date">03-01-2022</span>
</div>
<div class="col-md-6 col-sm-6 float-left heading">
<h4>Testing</h4>
<span class="global" data-type="India">India</span>
</div>
</a>
</div><br>
<div class="searched-articles" style="border:1px solid #000;">
<a href="#/test3-2/">
<div class="col-md-2 col-sm-2 float-left author-date">
<span class="date">29-12-2021</span>
</div>
<div class="col-md-6 col-sm-6 float-left heading">
<h4>BlazeDream Test3</h4>
<span class="global" data-type="India">India</span>
</div>
</a>
</div><br>
<div class="searched-articles" style="border:1px solid #000;">
<a href="#/2/">
<div class="col-md-2 col-sm-2 float-left author-date">
<span class="date">29-12-2021</span>
</div>
<div class="col-md-6 col-sm-6 float-left heading">
<h4>BlazeDreamTest2</h4>
<span class="global" data-type="America">America</span>
</div>
</a>
</div><br>
<div class="searched-articles" style="border:1px solid #000;">
<a href="#/news2/">
<div class="col-md-2 col-sm-2 float-left author-date">
<span class="date">30-11-2021</span>
</div>
<div class="col-md-6 col-sm-6 float-left heading">
<h4>News2</h4>
<span class="global" data-type="America">America</span>
</div>
</a>
</div><br>
<div class="searched-articles" style="border:1px solid #000;">
<a href="#/test3/">
<div class="col-md-2 col-sm-2 float-left author-date">
<span class="date">27-11-2021</span>
</div>
<div class="col-md-6 col-sm-6 float-left heading">
<h4>test3</h4>
<span class="global" data-type="India">India</span>
</div>
</a>
</div><br>
<div>
<select class="mdl-selectfield__select" id="countries" name="countries">
<option value="All Countries">All Countries</option>
<option value="India">India</option>
<option value="America">America</option>
</select>
</div>