50.尚硅谷_jQuery_应用_点击切换显示商品详情.avi原创

下面一个呢，啊也比较简单，我们来去给大家做一下。呃，我们的。第八个，第八个是做什么呢？是点击切换产品选项，什么意思呢？我们来看一下。这是我们已经做好的，就这个。首先这里面是不是有一共有这么五个table选项啊，点击不同的table，这个样式是不是发生改变了。这没问题吧，好，还有一个事情大家注意。大家注意啊，就这个里面它会有一些肯定会我点击不同，看它上面显示的效果一样吗？不一样啊，也就是说它每一个东西啊，这里有一个都对应一个什么呢？它自己特有的内容部分，譬如说我这个售后保障对应的是这一这一部分，大家看着不知道大家有没有注意观察到，我们点它，你看看这下面部分总是有。

看看有没有。看来这个规格参数啊，规格参数，规格参数能不能看到，好我点它呢，点错诶没有，主要是它的内容，它所对应的内容特别长，这个商品介绍内容特别长，一直往下翻，这都是些图片，看是不是也有。看不懂啊，来，我们来观察一下它里面的那个页面标签是一个什么样的结构。来看一下，首先这里面有一个ul。这个又要是谁呀，是不是这个水平的这一这一个这一个横线呢，它里面包含了什么。一共包含了是不是这么几个。大家看呢，我把它打开，这包含了这几个ii呀。

看懂不看懂，我事件我要加在谁身上，是不是就加在这四个ii身上，这应该说五个一共是五个ii对不对，五个选项嘛，好加在这五个ii身上，大家看啊，我给它加了什么事件，点击好搞定，那下面我们在回调函数里面该做什么事情呢？对谁做什么事情呢。首先要定我的ii要不要做处理。要不要是不是我点击的这个那个ii是不是要加上class，而另外的class要给他什么，是不是移除啊。Nno吧，N行，那除了这个呢，还有一些东西，这是啥呀？这个这个我们要管吗？这块是不是右侧的加入购物车，我们刚才做的那个迷你购物车那些果我们需要操作它吗？不需要啊，把它排除啊。

把它排除后，下面打卡。就有一些div，这个是什么div，看这就是那个商品介绍，只是现在是什么？是啊，这个现在是显示的状况啊，现在是显示的状况，那它一定显示么？为例，你看其他都是什么能懂的吧，这一共有几个是五个，那也就是说在点击我的某一个选项的时候，是不是更新这个里面的这个div的Dis display就行了。就是这首歌吧？那那也就是说我们的世界，我们要做的事情就慢慢就清晰起来了。

嗯，这个因为它不够啊，所以我要换到这上面来。放到这里来，这样的话我就能够去给他截截清楚，不然的话截不到，截不了。一共是啊大家看啊，我加事件呢，是加在这五个ii上面是吧，我要更新的也是这五个I，以及这下面的一个两个三个四个五个。哎，其实这一个I有内容吗？大家看到吗。这个I没有内容，为什么它没有内容呢？这个特有意思啊，当我点击它的时候，你看。你去就点击它的时候，他自己没有自己内容，只是看到了我们的商品的评价上面的东西，所以但是呢，也就是说这个有我问大家你说这个这个我要把它，我要把它整成这个有显示效果吗？它本身没有，但没它还不行。

没他好方便操作，你懂吗？为什么没他不好方便操作，因为到时候我们一一对应操作了，这是五个ii，这是五个div，是不是对应的操作啊，那个顺序，而且下标是对应的吧，下边也是对应的啊，这个其实以前写那个页面的时候，这个没有，后来我为了能够更方便的进行JS的操作，我给他加了一个div，其实任何效果都没有啊，任何显示效果都没有，但是方便我们的GS编码啊好来下面呢，我们就来开始去做它啊，来开始做它行。我现在呢，还是一样，先去截个图。这图稍微要大一点。好，差不多。好，把这个图呢拿过来。

哎，新建一个。啊，我不知道大家这里面咱们班会不会有人以后也要跟我一样去做做什么培训或者做讲师的工作啊，如果有人的话啊，大家也要用点心啊。啊，来看一下。那不要觉得好笑，也是有可能的，对吧。啊，作为一个培训的学生，如果你毕业了，你你如果做得好的话，当个一两年做讲师，其实特别有优势，因为你你你明白学生的心理啊。好，我们来看一下是什么样的状况，首先呢，嗯，首先我们要加事件的元素是A这个。来要加世界的元素是这几个ii，对不对？那我怎么样找到这几个ii呢？

是不是不是ul下面ii，但是我跟大家说过，最好先根据什么ID先定位到附近的位置，是不是再找到它呀。这是不是就好找了，那给他加的事件非常简单，是什么点击啊简单我也写的啊好，那接着我们要说的是我们要对哪些元素是不是进行动操作呀，那对哪些元素呢？首先要不要对这些I进行操作，是不是也要啊，那我这次画这边吧。有没有看到啊，还有除了这ii要操作，还有什么要操作，是不是下面div啊，下面几个div，一个两个三个四个五个对不对啊，这五个div，那除了这五个，那除了这些以外，我们下面要想的事情就是要想对它进行什么操作。

我要给它标出来，首先是这个class。是不是添加和移除啊，接着是这个里面的什么，是不是显示和隐藏啊，显示和隐藏，那基本上应该看着这个图就应该能看，要看懂。也就你别人看不懂，我跟他一我每一个图基本上啊，那个风格都一样，所以大家一定要看懂这个意思啊。好，来，下面我们就要去做了啊，这里面叫product下detail。好。来，我们来去写一个方形，起个名字。啊。叫table行吗？点击产品的选项卡呗。

OK，我一定要跟大家说一下，这名字不在乎你长还是短，长没关系，你要长了，就要保证你你的意思是完整的。能懂吧，要建明之意。好，下面还是要给谁绑定事件监听。叫product detail吧，是这意思吧，哎，对，它下面有什么ul，下面有ii，给他们加什么，点击监听。这什么好，那我们要做什么呢？大家看到啊。也就是说我点了以后，我点某一个是不是只有当前的这个有pass，其他都没有，我要简单的做倒是非常简单啊，不过我要先把它们先存一下。

这样吧，好，我存下有什么好处呢？那当然肯定是有好处的。我先去移除class，我也万水友，管他三家全部移掉，其实就一个，是不是看着吧。是这意思，接着我当前的这一个添加一个class，也就是通过class name属性去操作吧，啊这样方便吗？加一个什么。搞定一步了吧，那下面的我是不是要去操作这些div，那这些div物我最好先提前些什么，是不是找好啊，啊星线也找好大家看啊这个地方这里面，那也就是说我也一个意思，我其实是先把所有的先都给他什么隐藏，再接着把当前对应的那个给他什么显示，那首先我跟上面一个意思。

我先找到所有的什么呢？内容部分能不能找到所有内容，看看怎么找啊，这个该怎么找啊。大家看，首先我给你ID找到这外面的div，不接着找他下面的所有的div，但是。第一个第二味药吗？不要就除了第一个药，第二位是别的药啊，好啦，来看一下啊，首先我找到的是它。对不对，找到它以后呢，找它下面所有的什么div的子元素吧，找它下面所有div的子元素，但是呢，要排除什么第一个这个该怎么写冒号。排除第一个有两种搞法，一种是not force，一种是大于下标零。

哪个更好写一点？大于下半零，怎么叫大于下半零，GTG0，那我要写排除第一个，怎么说排除第一个冒号not，什么冒号first，明显这个要复杂一些。懂不懂，明显这个这个表达方式是不是刚才那个复杂一些啊，复杂一些，所以我还是写什么GT0啊。好，现在我是不是找到所有内容D了，那我先干什么事情？是不是隐藏所有内容div对不对，点什么he的，接着干嘛去显示当前对应的div显示当前，记住啊是对应的啊看对不对，那怎么样，我知道是对应的了，他们怎么样对应法呀，下标。

对不对，那下标准的，也就是说我要得到当前我点击的这个AI在这个里面的下标。是不怎么知道取下标，我记得我这个事情其实就一种办法，先包装一下this，接着调用一下什么index方法，哎，其实这个方法真好用，说实话特别好用。现在我是不是有下标了呀，就当前的下标，有了下标还不好做吗？是不是我所有元素是不是所有内容是不是都有啊，接着我有下边，我找到其中某一个用什么，我可以用中化可位，但是中化的话得到的是什么多米元素，我想得到一个结块计算怎么做怎么做。现在我是不是我是去过滤了，还是去查的，是过滤还查的。

哎，什么，也就是说我得到的结果是其中的某一个，还是他的父母兄弟孩子啊，其中的某一个呀，我要得到其中的某一个ii吗？不是，是不是，是要过滤，那要过滤，你想想看，我要根据某一个下标过滤，我应该用什么？是不是用equal对不对啊，OK，点什么equal，传什么index，接着我要对它干嘛显示好，有人说我想用原生的，我能不能做。来原声的怎么做都老福看S中括号什么index，现在我是不是操作样式去点style什么样式了，Display等于什么block。

能不懂，这就是原生的，有人说这个好像这个也可以啊，可不可以，可以一样可以，你说有难，难了多少也不至于，这没有什么太大的区别。我希望大家原生的和几块的都要会啊，这些操作，基本的操作是最最基本的操作。那是不是事情就搞定了吧，是吧，来，我们来看一下呗，瞧一瞧，看一看。好点，它看着看这里啊，就多了，多了这一部分，那个那个商品介绍的部分是不是隐藏了，那些图片都隐藏了，多了这一部分好了，包装清单，哎，这是包装清单，嗯，下面商品评价一个都没有，下面没有东西，直接就是商品的评价，好现在售后果断有没有。

是不是有啊，可以了吧，可以so easy。好像最后一句话都以同样的话结束哈。来把这个呢，给它保存一下第八个。嗯，行来把这个呢给它关了啊，不用管了，没事把这个提交一下，晚上提交一下，提交一下这里点一下他。啊，一定要选一下这个啊，因为这个有一张图片是吧。这一个我们是做的是点击切换显示商品详情。嗯，行，可以OK，搞定。

啊，大家分析一下啊，五分钟。