jQuery是一种常用的JavaScript库,它可以简化代码、提高开发效率。在网页开发中,我们有时需要根据条件来筛选和显示特定元素,比如筛选大于某个数值的项。下面就来介绍一下如何使用jQuery来实现这一功能。
$(document).ready(function(){ // 给筛选按钮添加点击事件 $("#filter-btn").click(function(){ // 获取输入的筛选值 var filterValue = parseInt($("#filter-input").val()); // 判断筛选值是否为数字 if(isNaN(filterValue)){ alert("请输入有效的数字!"); return; } // 遍历所有需要筛选的元素 $(".item").each(function(){ // 获取元素值 var value = parseInt($(this).text()); // 判断元素值是否大于筛选值 if(value > filterValue){ // 如果大于,显示元素 $(this).show(); }else{ // 如果小于等于,隐藏元素 $(this).hide(); } }); }); });
以上代码中,首先通过`$(document).ready()`来确保代码在DOM加载完后执行。然后给筛选按钮添加点击事件,获取输入的筛选值并判断是否为数字。接着使用`.each()`遍历所有需要筛选的元素,通过`$(this).text()`获取元素的文本值,并将它转化为数字类型。然后判断元素值是否大于筛选值,如果是,显示元素;如果不是,隐藏元素。最后,将以上代码放在`
Powered By Z-BlogPHP Theme By 前端老白