04-jQuery/09-尚硅谷-jQuery-练习：品牌展示

叫做品牌展示这样一个练习，我们给大家看看这样的一个效果啊，品牌展示是啥效果呢？啊和上我们找到练习里面品牌的展示这个地方，好，我运行这个是做好的，大家先看看。啊，一开始的时候啊，哎，这里呢，展示了一些可能比较火的品牌，大家比较关注比较高的啊，这里呢，有其他品牌看见吗？就是其实还有其他，然后呢，这里还有个按钮，这个按钮是带有功能性的，显示全部品牌，并且有个角标向下，也就表示当你点击这个按钮的时候，它会把那个品牌往下拉，展示出全部能理解吧，看见吧。诶就这样子啊，然后点完之后这个按钮，它就文字是不是变了，它就变成显示精简了，然后这个九幺也反过来了，就表示诶你再点我就给你合上去，只看到一些比较热门的东西啊，点你看就合上了这个，当然这个跟手机里很多一些菜单选项差不多吧，我不知道大家有没有关注过啊，菜单差不多啊，我们就来看看这样的一个功能怎么样去实现啊，而且中间你看打打开的时候是不是还有一些颜色是高亮的呀，啊这些基本上就是交了钱打广告的是吧，比较醒目，好那我们看这样的效果怎么做啊，我们点开这个带有下划线啊，下划线是空白的，留给我们去做的。好，那我们先运行一下，这就是一上来时的这个界面的效果，那么一上来的时候，我们应该干嘛？

我们要先想一想，一上来的时候，我们应该隐藏部分的品牌，能理解吧，隐藏一些品牌，那他大概是怎么隐藏，还记得吗？他是不是只留下两行，两行以后呢就都隐藏了，留下这个其他是吧？哎，留下这个其他啊，那我们来看看怎么去实现。

诶走啊，写不出来是吧，它能生成吗？下面啊，在下面的我说吗？来首先一开始的时候大家去看一下哈，下面这些东西什么呢？是无需列表，你看见吗？我们一上来是不是让这个卡西欧之后的这个品牌除了它以外都隐藏掉，所以怎么办呢？方法有好多啊，我们先查一下AI，然后我让这些索引012345卡西欧之后是不是都隐长就大于五是吧？GT大于五。的都隐藏GT是吧，GT啊，然后我们先看看效果，诶没有出来啊啊，我这个是嗨，不是黑的来，大概是这个效果吧，嗯，但是隐藏的时候觉得是不是应该留下一个其他品牌。

对吧，哎，其他品牌嘛，那你应该什么，是不是不包含最后一个呀，Not last，诶这是一个基本的一个初始的状态啊，这个是基本的初始状态，好，那么接下来这个初始状态有了以后，我们就想了该干嘛了，我们是不是想想这个按钮就可以点击了，对吧，它说显示全部选盘。显示全部品完了，点了以后，它就应该往下拉展开，然后再次点击它是不是就应该合上对吧？那所以接下来的工作就是先给这个按钮把上单位事件呗，那这个按钮到底是啥情况？来往下看一下诶，发现下面是不是也没有按钮啊，Button层在哪？没有button层只有一个div，里面放了一个A标签，显示全部品牌，看见吗？

哎，所以很多效果啊，是人家通过CSS样式给你做出来的，那这个时候怎么办，我们把这个点击放在A标签上就可以了。能理解吧，放在A标签上就行了啊，因为A标签它会有这个手嘛，是吧？好，那这个A标签怎么查，直接通过标签明场不行，对上面是不是也有一堆啊，所以你得查什么div下的，Div下的A那就绝对是它了啊，最后一个也行啊，来我们说div下的，Div下的A你怎么查都行啊，只要你查到最后这个啊，就是按钮这个就可以了，走click单击事件，我们说给功能的这个按钮绑定，单击事件啊，然后绑定之后啊，我们做一个测试。啊，时间就随便写一下来看看效果，这是不是出来了有效可以的，诶怎么办呢？咱们不希望它跳转，是不是杂，上午刚讲完是吧，比false好。

那么接着呢，我们就来想想了，按钮时间把好了，那把好了之后咱们要干啥，咱们是不是点击了以后，让那些消失掉的品牌，要么显示要么隐藏，没错吧，要么显示要么隐藏，那怎么办？消失那些是不是这些元素啊，那还得查他呀，查他以后。它既能够消失又能够隐藏，它是哪个切换吧，只有切换服务这个这个效果啊，这能一点就远能要么显示法呢是吧，切换码好切换呢也出来了，好咱们说让啊某些品牌啊，那么显示或隐藏啊，现在有了，有了以后咱们再来看一下，我们说这个按钮，每次点击触发完这个功能，它按钮上的文字说明是不是得发生变化，要发生变化，好那这时候注意看一下哈，点点现在是没有变的吧，但是我不知道大家还记没记得他这个文字是有两种情况，一种情况啊，你看按就是按钮上的文字。

两种情况，一种是显示全部品牌，看见吧，还有一种是什么？对显示精简品牌，而且注意当你是显示全部品牌的时候，角标是不是向下，我们先把这个东西啊，先给他记录一下哈，那么角标。

向下，而当你是显示精简的时候呢，小标下上啊，大家可能没有留意啊，我再把那个之前做好了，打开你稍微看一看，来他们运行。寝示全部选材的时候向下看以吗？显示精简的数不向上啊，哎，他就合上的意思嘛，啊，那咱们就暂暂时现在就记录下来了，那记录下来之后呢，咱咱们也希望做的跟他这个原来的一样啊，那这时候怎么办，我们就要想一想了，改文字好说这个文字是不是在A标签的span里面改造里面的字就好了嘛，这个我们讲过呀，像是行止标签和结束标签的内容就行了，那角标呢，角标是一个图片来的，但这里好像没有看见image啊。

咋办呢？那我们就好好观察一下来，打开看看上面的样式，在这些样式当中啊，你会发现，诶，这里是不是有个有两个图片是吧？那打开看看这两图片咋回事啊？Image里面有一个DA up，那你点击一下单端好向下的那个角标看见吗？单好是不是刚好向上，其实就是这么两个图片而已，哦，那我们就想想了，这个图片是由这个样式决定的，这个样式谁在用呢？So less so more对吧？谁在用谁在用。是不是那个D在用啊，那到底是不是这个D就能够改变这个角标的方向呢？我们试试看啊，它现在是向下的，那说呢，想清华谁的说刷新一下，诶真的有改了哦，看来角标这个问题啊，我们找到问题了，角标是不是只改这个样式就可以好了，那咱们要做的一些事情咱们就了解了。

对吧，要改两个东西嘛，一个是按钮上的文本，一个是角标的方向。但是大家想想。大家想想你改的时候举个例子说哈，我现在要改文本，文本是谁，是不是div下的A下的SP是吧？或者说是div下的div的A下的SPA都可以啊，那我现在直接拿我就能改了吗？Div下载div下载A下载spa.china下的好我我到底这里是显示全部品牌啊，还是显示经典品牌。

怎么做，我不能写死吧，我写死时它是不是永远是一个字符串法，那这应是两个，它两个是由什么决定的呀？我想想啊，好像是不是由这个品牌，由品牌的显示和隐藏状态决定的，你想想啊，你看我现在呢，它隐藏，它隐藏的时候，我这里就是什么显示全部对吧？我一点就显示全部，它就显示出来了，它显示出来之后，我是不是我字变成显示精简啊，所以啊，我这个功能是由它的那些品牌到底是显示还是隐藏状态界令对吧？那怎么办呢？我先别写，我得先判断一下，我是不得先想办法找到他们俩的状态才行，怎么知道这个状态，大家注意看这个。我先查到这些品牌，他有个方法，其实咱们讲过一次，但用的不多，还记得意思这个方法吗？意思是判断法，哎，我们就可以问一下你是不是隐藏的呀，看一下哈，你是不是隐藏的，现在我一点击它是不是就是显示了，那你问他是不是隐藏的，就说我不是。

看见吗？现在呢，它是可见的，我再点一下是不是就隐藏，再隐藏的时候，你问他说我是不是隐藏了呀，他说是看见吗？那这个时候我是不是就可以得到它当前是隐藏还是可见那个状态，我是不是就可以根据这个状态来做不同的操作呀？啊根据它判断一下吧，主要就if呀。然后在这边说明一下这是什么，这是判断品牌当前是否可见，能理解吧？那么我们就要想想了啊，显示全部品牌角标向下是什么状态下是品牌隐藏的状态，没错吧？那下面呢，就是品牌可见的状态，好了，那这个是隐藏，隐藏是不是应该是这个内容，当else的时候，它是不是就应该是下面这个内容，对吧？你先把这个捋清楚，关系捋清楚了，好，捋清楚以后咱们就可以工作了啊。

说吧来吧，我要操作谁呀？注意看我要操作这个div下的div下的A下载span div后盖的div下的片点，然后文字内容就是显示全部品牌。

来下面是不是显示经典电台来一点点来改，不着急啊，走，那我刷新一下总显示全部确实没问题，显示精简对吧，可以了啊好，接着我们就来看看角标。看看角标，那么角标是改谁，我们刚刚其实也看见是不是改这个DV就行是吧，诶给他改成DBC怎么改呢？注意看啊，我们说向下是哪个，向下是不是这个SOSO末对吧，那向上呢，向上so less。看清楚吗？OK，那这个时候怎么去改，注意看啊，我要找到这个div，现在这个div吧，改它吧，别着急，这是div后代的D，然后去一看我添加样式啊，添加一个样式，它这个样式是什么，是不是缩末呢。

那下面下面我就添加so呗，对吧，诶我这么讲有没有人发现什么问题，对有同学想明白了，老师你这么一加上去，它不就是又有向下又有向上了是吧？能能理解吗？你这么加上去不就有两个吗。大家记住啊，这两个样式是不是只能同时存在一个，所以你在加之前你得干嘛，你得把原来的样式先删掉，能理解吧，否则他就乱了，到底是像上还删下，我就我就不是傻逼了，我跟你说来录幕class咱们什么都不写的时候，他是不是删除全全部的样式，就这样这首就可以了啊，我们看一下效果啊，来走向上了，走上下来OK啊这里呢，同时再说明一个事情，什么事情它的这个样式我要说明一下，诶这种样式好像加到空格隔开是吧，咱们也没讲过。

这什么选择器啊，这老师大家记住啊，这种选择器，这种写法叫做后代选择器。老师，啥是后代啊？来个东西啊，注意看前面这部分是啥，是不是内转系，然后我们说中间加了一个空格，空格是取后代的，就是说使用我这个样式的人，他要有一个后代，是AA的后代里面还要有一个SPA，如果你缺少了这些元素组合，你哪怕用了我这个样式，它依然看不见这个效果。注意看啊，用我这个样式的人后面要有A和span，请注意看现在哦，我把他用了我的样式，它里面是不是有AA，里面还有span，如果我把这个STEM给它去掉，刷新一下，还能看见这个角标框看不见了，所以一般情况下，大家注意到了企业开发的时候啊，人家给你这个页面啊，写好了以后，你就不要去制作聪明的修改页面中的标签，否则样式就看不到了，对吧，我给你演示了啊，你别改。

你别改了，你就改文字，那该改文字改文字，该改效果改效果，剩下的你就别管了，能理解吧啊，你要你要改的话，就跟公司的这个美术沟通协调一下，哪个东西是可以改的啊，哪个东西不能改，你要会点改啊，跟他好吧，那接来咱们这个效果差不多了，还差什么功能呢？对高亮的同学还记得是吧，就是当我显示全部的时候，我上面是不是有些品牌要打广告了，就是我要我要很明显的突出一些。啊，很明显的突出一下，那这个怎么办呢？有同学老师简单啊，我在这里加个，但是当color了就完事了嘛，是吧，我这肯定高亮啊，红色红色对吧，就他哎看见吧评价，但是我们提前跟大家说明一下啊，一般的这么做是不推荐的，不推荐的为啥呀，你给的这个颜色值和人家设定美术设定好这个颜色值其实是不同的，我给你看一下哈，一点点细节都不行，等我开发的时候就这样来，我打开这个，我运行一下，大家看这个颜色紫吗？是不是有点偏橙色，橙红是吧，而你这个是不是纯红大红看见了吗。

这是不允许的，你不用跟我说，你不要跟美术说差不多呀，美术没有差不多好，你跟他说差不多，但是但是不行啊，它设好的是多少是多少啊，那这个时候呢，怎么办呢？那老师我哪知道它那个值是多少，其实它有啊，它有一个值来你看看他其实一开始的时候我先把这个关了啊打上来，他一开始的时候这里就已经留好这个颜色了。

就这个颜色，你只能用这个颜色，其他的都不能用来这个颜色就放这来嘛，有同学老师那行呗，那他说用这个颜色，我就用这个颜色呗，我自己加不就完了嘛，对吧，不不就这个颜色嘛，是吧，颜色是对的，但是我们也不推荐你这么用。一般人家记住啊，美术写好这个样式之后啊，就是希望你通过样式来做的，不是希望你直接放在上面去用的能力了吗？啊，你直接放在上面去测试一下是可以的，你说开发的时候你怎么把它拿掉。能理解吧，所以一般不推荐这么写啊，那怎么办呢？你就看他这个样式怎么回事就行了，用这个样式就可以，那么用这个样式的人，他后代里面是不是还要有一个A标签啊，也就是也就是注意看啊，对于这些品牌而言，他的后代要有个A标签，那是不是应该给这个AI用，这能能能听懂吗？对吧，你看啊，用这个样式的人，他是不是要有个后端是A，那不就是这个AI吗？

这个AI用它后面是不是有个A啊，啊，Class叫做这个不是它就这个是不是这个来就它就这个颜色看见了吗？啊，那么你要给它加高亮就加一个样式。那么你要是不给它加高量去掉的时候，是把这个样素去掉能听懂吧，好，那现在呢，所以看看哈，呃，我们显示状态下是要加高亮的，还记得吗？就没有捋清楚什么时候加高量啊，是不是这个全部都显示的时候我才高量是吧，也就是这个地方加高亮，你要捋清楚吧，加高亮就是去掉高亮，去掉高亮就这样子。

啊，就这样子，那么怎么加高量呢。我刚刚都说了呀，首先我炒到你要加高量的那个Li啊，就Li我们看看找找找哪个哈，咱们找一个国产的爱国者呗，或者明记呗，是吧，明记还记得这个东西吗？这个这个是过滤器，又忘了内容过滤器，检查是否包含哪个文字的，这是个标签名啊，啊你看看哈，就在哪呢？在内容这个地方，你看他的示例啊，他说呃，查找所有包含这个重的div元素，我就他先写标签名四个是吧，按照标签名查，他说给我检查一下里面有没有这个字，这是过滤那文字吧，那么我们用这个containnu，你看啊，是不检查里面有包含这个名记这个字啊，啊你给他加，当然你也可以用索引啊，什么东西能理解吧，只要找到你需要加高量的那个AI就行了，那么找到以后an class，哎，这个class是。

水压加高量啊，就它是吧，问题是吧。加上它，那去掉高亮呢，是不是应该啊remove class好，我们示意一下啊，有吧和尚给它去掉啊和给它去掉有的老师和还需要去掉吗？本来就看不见了，对，你要是问问题是如果你隐藏是否不包含它们呢？关于你操作的是索尼呢，索尼是不是一直都在看见了吧？那你这个你不去掉它能行吗？看一下看见吧，那你不去掉，这时候是不是还在呢？你懂吗？还得去掉它啊，好，这就是品牌展示。