笔记 一个给标签分类的js小技巧

效果是,点击最上面一栏“所有订单”就出现所有的订单,然后点击其他栏就会分类显示订单。

$(function(){
        $("a[orderstatus]").click(function(){
            var orderstatus = $(this).attr("orderstatus");
			if("all" == orderstatus)
			{
				$("table[orderstatus]").show();
			}
			else
			{
			    $("table[orderstatus]").hide();
			    $("table[orderstatus="+orderstatus+"]").show();
			}
					//console.log(orderstatus);
			$("div.orderType div").removeClass("selectedOrderType");
			$(this).parent("div").addClass("selectedOrderType")
		});
});

首先这个点击事件的选择就是第一次见,因为选择栏有很多个a标签,但是共同处是都有orderstatus这个自定义属性,也就是通过属性来选择的。

觉得比较巧妙的是, 把“all”这个所有订单 特例了出来,判断为是这个页面,那ok,全显示出来,否则显示分类的。然后还有添加选中类和删除选中类的操作,避免了写更多的css,很简单是实现css的变化。

学习网站:https://how2j.cn/p/4515

发布了58 篇原创文章 · 获赞 20 · 访问量 5186

猜你喜欢

转载自blog.csdn.net/qq_41658124/article/details/104297712