Jquery怎么实现更多选项的功能-创新互联

这篇文章主要介绍“Jquery怎么实现更多选项的功能”,在日常操作中,相信很多人在Jquery怎么实现更多选项的功能问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Jquery怎么实现更多选项的功能”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

十年的七台河网站建设经验,针对设计、前端、开发、售后、文案、推广等六对一服务,响应快,48小时及时工作处理。网络营销推广的优势是能够根据用户设备显示端的尺寸不同,自动调整七台河建站的显示方式,使网站能够适用不同显示终端,在浏览器中调整网站的宽度,无论在任何一种浏览器上浏览网站,都能展现优雅布局与设计,从而大程度地提升浏览体验。成都创新互联公司从事“七台河网站设计”,“七台河网站推广”以来,每个客户项目都认真落实执行。

筛选功能如图:


Jquery怎么实现更多选项的功能


这里只实现以下两个功能

  1. 更多选项。点击切换收起选项。

  2. 点击条目在上面显示已点击条目。

首先是Html代码:这里主要的代码是:



			笔记本
品牌:
  • 联想
  • 索尼
  • 三星
  • 尼康
  • 松下
  • 卡西欧
  • 富士
  • 柯达
  • 宾得
  • 理光
  • 奥林巴斯
  • 明基
  • 爱国者
  • AAA
  • 明基
  • 爱国者
  • BBBB
  • 明基
  • 爱国者
  • 其它
  • 价格:
  • 0-1000
  • 1001-2000
  • 2001-3000
  • 3000-~
  • 尺寸:
  • 14
  • 15.6
  • 21
  • 29
  • 触控:
  • 普通触控
  • PC平板二合一
  • 非触控
  • 处理器:
  • Intel i3
  • Intel i5
  • Intel i7
  • AMD A6
  • 厚度:
  • 刀锋轻薄
  • 便携轻薄
  • 普通轻薄
  • 显卡:
  • 入门级独显
  • 性能级独显
  • 玩家级独显
  • 大家说:
  • 配置不错
  • 散热很好
  • 外观不错
  • 屏幕大
  • 更多选项(处理器,厚度,显卡,大家说)

    CSS代码:

    Css代码我就不去解释了。

    这里主要是Jquery代码。可能我的方法不是很到位,希望各位见谅啊。有更好的可以盖楼。一定改进的。

    $(document).ready(function() {
            //定义一个数组。用于存放每个条目的内容
    	var arr = new Array();
    	//初始化 刚开始就将第3个以后的隐藏起来。
    	var $category = $("div.attr:gt(3)");
    	$category.hide();
    	//详细和精简的切换代码。
    	$("div.showmore > a").click(function() {
    		if (!$category.is(":visible")) {
    			$category.show();
    			$(".showmore a span").css("background", "url(./img/up.gif) no-repeat 0 0").text("收起");
    		} else {
    			$category.hide();
    			$(".showmore a span").css("background", "url(./img/down.gif) no-repeat 0 0").text("更多选项(处理器,厚度,显卡,大家说)");
    		}
    	});
            //从这里开始就是响应点击条目的事件了。
    	$("#pingpai > li >a").click(function() {
    	        //先清空div
    		$(".mt div").empty();
                    arr[0] = $(this).text();
    		print_r();
    	});
    	$("#price > li").click(function() {
    		$(".mt div").empty();
    		arr[1] = $(this).text();
    		print_r();
    	});
    	$("#chicun > li").click(function() {
    		$(".mt div").empty();
    		arr[2] = $(this).text();
    		print_r();
    	});
    	$("#chukong > li").click(function() {
    		$(".mt div").empty();
    		arr[3] = $(this).text();
    		print_r();
    	});
    	$("#cpu > li").click(function() {
    		$(".mt div").empty();
    		arr[4] = $(this).text();
    		print_r();
    	});
    	$("#height > li").click(function() {
    		$(".mt div").empty();
    		arr[5] = $(this).text();
    		print_r();
    	});
    	$("#xiankao > li").click(function() {
    		$(".mt div").empty();
    		arr[6] = $(this).text();
    		print_r();
    	});
    	$("#allspeak > li").click(function() {
    		$(".mt div").empty();
    		arr[7] = $(this).text();
    		print_r();
    	});
    
            //循环打印数组
    	function print_r() {
    		if (arr.length > 0) {
    			for (var i = 0; i < arr.length; i++) {
    				if (arr[i] != undefined) {
    					var txt = $("").text(arr[i]);
    					$(".mt div").append(txt).fadeIn();
    
    				}
    			}
    		}
    	}
    	//jquery动态响应点击事件,响应点击之后删除条目
    	$(document).on('click', 'b', function() {
    		arr[$(this).attr("name")] = undefined;
    		$("b[name='" + $(this).attr("name") + "']").fadeOut(500);
    	});
    
    });

    到此,关于“Jquery怎么实现更多选项的功能”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注创新互联网站,小编会继续努力为大家带来更多实用的文章!

    另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


    网页题目:Jquery怎么实现更多选项的功能-创新互联
    文章地址:http://scyanting.com/article/dspihp.html