网站建设资讯

NEWS

网站建设资讯

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

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

创新互联建站坚持“要么做到,要么别承诺”的工作理念,服务领域包括:成都网站建设、成都做网站、企业官网、英文网站、手机端网站、网站推广等服务,满足客户于互联网时代的东乌珠穆沁网站设计、移动媒体设计的需求,帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴!

筛选功能如图:

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


    本文标题:Jquery怎么实现更多选项的功能
    当前链接:http://cdweb.net/article/gijppp.html