209、商城业务-商品详情-sku组合切换

接下来我们来完成点击链接跳转的功能，首先呢，我们以前对每一个属性的值，你都添上了我们自定义的这个属性，SS表示呢，哪个SQ里边都有这个值，而且我们在这呢也回显成功了，只要每一个回显的值，比如我们这个是绿色的，我们来看只要是回显的，它就会加一个chat属性，那我们现在要做的就是当们来点击黑色，然后呢，我们要将黑色256G是哪个SQ，我们要得到，得到以后呢跳转过去，但是呢，这有一个细节，我们上节课说如果我们直接来获取我们加了check的属性的这些人的值，我们会发现我们的这个绿色啊，我们就算点别人他的这个check的呢，都是不动的，所以呢，我们要做的就是我点了这个黑色，我们要能感知到我们的黑色，还要感知到别人的这个选择的样式，所以我们先来这样，我点了。

打一个人，那我们就给他身上呢，自己我们再来加一个标识，我们加的标识呢，就叫click，这是我点了的人，那我点了的人呢，我拿到它的这个值和我们下一组属性，其他人的这些值，那我们就可以找到了，所以我们在这儿要做的事就是第一个那点了哪个元素，我们先把这一块去掉，点击的元素先添加上咱们这个自定义的属性，自定义的属性添加这个自定义属性呢，就是为了咱们这个识别，为了识别什么呢？为了识别我们是刚才被点击的，刚才被点击的，然后呢，我们下一次要获取到这个的SQ池。哒，我们就来Dollar符this来找一下，好，我们Dollar this呢，那就是我们找到了被点击的这个A标签，然后呢，我们给它and一个class就行了，好，我们来添加上一个自定义的class，我们就叫click的，好，我们已经给你点了，好我们来看一下我们的现在页面效果，来一步一步做出来刷新，我们现在呢是绿色，绿色我来右键检查元素来看，绿色呢是加了check的，如果我来选中了黑色，绿色的check的是去不掉的，但是呢，我们黑色我们加了一个click click的，所以我们要选择的是什么？首先跟我们click的同行的这一行，这一行里边呢，我们只找到我们click click的这个值，但是呢，其他的下一行我们找到它的check的值，所以当前点击的这一行。

以它为准，而它的下一行里边的这些check元素，我们就是要获取它的值，所以呢，我们现在要做的就是两个事情，第一个我们先来获取当前元素被点的这个SQ集合点，我们可以at tr来获取，我们就叫SKS，这个SKS呢，由于是一个字符串，我们来看这一块呢，它是一个字符串，我们后来呢，为了数组筛选，我们可以给它分割转为数组，那它返回的这个字符串在我们GS里边有一个方法叫split，好split呢，我们可以使用逗号把我们这个字符串呢先转成数组，好我们这个当前的，我就叫current，好我们这个当前的这个被点的SQ组合在这，然后呢，找到其他人的S组合，那怎么找呢？我们就可以来，这样我直接使用Dollar福小括号，我呢就直接找。

啊，其他所有被选中了的，好，其他被选中了的，那其他被选中了呢，就会有一个现象，那就会把我的这个黑色也找到，所以为了方便，期间当我来选中了黑色，不对，我们这个绿色呢，它是默认加了check的，所以当我选中黑色以后，我们应该把它同行的其他人的check的给它去掉，所以呢，我们要做的就是找到黑色的，我们当前点的这一行按钮，好我们要去掉同一行，去掉同一行同一行的所有的check，把它去掉，我们找呢，才不会找到这个错误信息，好我们怎么去掉呢？我们来Dollar this this呢，就是我们当前。

只点击的这个A标签，我们来看一下，那当前呢，点了黑色，人家绿色里边有我们这个check属性呢，那我们怎么能把这个绿色的去掉，那么就来当前的这个标签，然后呢，我们再来往上找，找它的副标签，再来往上找它的，再上一级的副标签，就是这个DL，这个DL里边有很多其他人，所以呢，我们就来找上两级副标签，我们使用解parent的方法，这是一级副标签，再来parent找到它另两级副标签，定位它在它的副标签以后，那希望改到副标签里边所有的子元素，所以呢，我们现在就应该是找到所有子元素，哪些子元素呢，就是我们这个SQTRY6找到它们，然后呢，把它们的这个check全部去掉，所以呢，我们现在找到他们。

我们调用解克瑞方法来找一下我们的这个杰克瑞API，在杰克瑞里API里边找子元素，我们有一个方法叫丘疹，这个丘疹呢是找子元素，但是我们的这个层级关系已经是这个DL的孙子了，相当于是后代元素，所以我们使用放的来找，我们直接来找他的后代元素，好，我们来找到他们，我们就在这来写两极负以后放的，放的谁呢？我们是按照类来找的，相当于找所有这些元素，诶我们传一个选择器找他们，找到他们以后把他们的class都移除，我们有一个杰克瑞有个remove class，我们来移除它的这个某一个样式，来看一下这有一个class，比如我可以把它的这个加了selected这个样式，加了selected这个样式给它移除掉，那我们呢，就来写一个remove class。

Class，我们移除哪个样式呢？我们移除这个check的样式，好，我们先来保证这一块呢是正确的CTRLF9。我们来看一下我们的效果，好，我们来刷新，刷新，现在呢，我们现在这个绿色默认回弦呢，是加了这个check的，当我一点黑色点来，我们一点黑色，我们发现绿色的这个check就没有了，那我们下次来找所有被选中的就不会找到这个绿色了，那我们把我们黑色的组合先拿过来，再把其他人的组合拿过来，好我们在这儿呢，这就是拿其他人的，其他人都是加了check的，把他们拿过来来找他们，因为呢，其他人可能有很多，我们可能不止这两行，销售属性可能有第三行，第四行，所以呢，我们找到其他人，其他人有很多，我们就来遍历一下each，我使用杰克瑞的each，这就是增强for，我们来便利，便利的这个当前元素，相当于我找到的其他人的这个人，那我们就Dollar this，我们还是一样找到当前元素的这个at，点一个，它呢有一个方法叫at tr，取出它的SQ。

组合还是要切分好，把这一块呢，我们直接拿过来，那切分呢，相当于得到我们其他人的这些组合，那由于我们这个组合呢非常多，我们以后将所有的SQ组合SQS我们全放在一个数组里边，又一个array好，这个数组里边呢，我们接下来我们我们自己的我们也放到数组里边，SQS点一个有一个方法叫push，给数组里边放一个元素，那就是它好。

这时呢，我们把当前被点击的，当前被点击的所有SQ组合数组放进去，然后呢，这是第一个，第二个把其他人的也放进去，给SQS里边点一个，再来一个push，那全放进去以后，我们在控制台打印一下我们最终得到的所有SQ数组集合，Log console log，把这个SQ数组集合拿过来。CTRLF9，我们来看一下我们的页面效果。好，我们先来刷新，首先我们的回显功能是正常的，好把控制台清空，比如我来点一个，我来点一个紫色256，那现在两个数组，一个是242526，一个是十，什么二五，那如果找他们的交集，那就是二五，我们再来点一个黑色，黑色呢，现在是诶90 11和十十三这一堆，那接下来我们想要跳转，那就简单多了，只需要把它们里边所有的，因为我们这个SQ是一个数组来看一下，把数组里边呢，有两个小数组，不管有两个，三个还是五个，找到这些所有数组的交集，我们就可以得到我们最终结果，好，我们就来给他找交集，那怎么来找交集呢？

我们来看一下我们的效果，首先我们来给大家演示一个，在解壳RY里边有一个很方便的方法找交集，首先我们知道这个SKU里边有两个元素，那我就来SQS0，这相当于是我们第一个我们取出的这个数组就是它第二个数组那就是它，好，这是SQS0。接下来我想要知道它里边跟另外一个SS1，它们的交集是什么？我们可以这样做，杰克瑞呢，有一个filter方法，我们可以Dollar福小括号，要使用杰克瑞方法，先得把它们包装成杰克瑞元素，Dollar福小括号，把原生的GS这个数组包装成杰克瑞元素，调用杰克瑞的filter方法，然后呢，把第二个数组再传进来，第二个数组是咱们这个SKU，哎，我们这个一，那么在这里边来判断它里边有没有包含它。

而且呢，它是来取交集的，最终呢会得到一个结果，我们把这个结果呢，我们在控制台一打印，来看能不能得到这个交集，Console log走好，我们来看一下效果，CTRLF9，记住调filter方法的一定得是杰克元素里边传的这个集合，那就是原生的这个数组，来看一下效果，刷新清空控制台，来选中黄色256，诶我们发现呢，它是19是公共的，我选择白色二五六十三是公共的，我选择白色64，那么这一块呢，就诶它没有找到这个公共的，相当于我们这个东西呢，就没有这个组合数据，那我们这一块呢，就可以利用这个方法来得到它的交集，但我们发现得到的这个交集呢，我们随便点一个，好，我们来点一个，有的，我们这多次一点以后呢，它取不出结果了，这是我们这个Ajax的问题，因为我们页界面现在没跳转，我们以前呢，点一个肯定就跳了，那们现在呢，随便来点一个，那我们现在呢，由于我们渠道。

那这个公共元素是25，我们filter返回的呢，还是一个解壳对象，所以我们整个这个方法返回的呢，都是一个解壳对象，如果你想真正取出是哪个元素，你就只需要写一个零，因为我们发现这个解克对象呢，它是一个数组，所以零号呢，就代表我们这个原生的值CTRLF9，哎，那我们每点一下呢，我们就知道是哪个被选中了，我们来看一下，好，我们来红色256，那它是22号，黑色256它是十号，白色256它是13号，哎，我们都知道，那好，接下来呢，我们现在重新改变一下。如果是我们以前这样直接就做完了，但是我们现在说，由于我们可能这一块呢，属性有很多种，有颜色版本，可能还有内存这一块的内容，所以呢，我们就要把这个数组里边的所有元素都要来做一个交集，好我们来遍历。

我们来遍历我们整个数组里边的所有东西，我来写一个for循环来写一个这个增强for，那么从I从零开始到I小于我们这个数组SQS，点一个Les，然后呢，我们来I加加，然后我们要过滤，怎么过滤呢？因为我们是如果它里边有十个一二三四五六七八九十一跟二过滤的结果，再跟三一过滤，他们的结果再跟四一过滤，过滤的结果总的再跟五一过滤，所以呢，相当于一个迭代过滤，那么接下来呢，我们就来写SKU，诶，我们先呢。不从一开始，不从零开始了，不从零开始了，我们从一开始，因为我们这个零呢，我们就是要筛选的，我们先从SQ0DOLLAR符小括号，我们用杰克瑞一包装，然后呢点一个filter，我们先来过滤一下，过滤一下谁呢，过滤一下我们的这个SQ1，所以相当于我们当前正在便历的里边的东西，然后呢，过滤得到的结果与为我们还要迭代过滤，所以呢，我们把这个结果我保存一下filter原声等于多少原声呢，我就是SQ0FILTER element好，然后呢，我们让SQ0，然后呢过滤一个SQ1，将最终过滤的结果又跟这个element一遍，那下一次迭代。

变成二了，二就是以上两个的过滤的总结果，最终过滤的值，这是我们整个迭代过滤，最终迭代过滤完了以后，我们这个filter就会得到，我们来Co log们拿这个filter来看一下，来CTRLF9，我们来看一下我们的效果，我们这儿呢还要改一下，我们就加SQS，因为我们所有的都在这儿放着呢，SQS好，我们从来没有SQ这个变量。

好，我们现在来测试一下，我们来刷新，好，我们在这来点黑色，绿色64G，好，现在呢是17号，绿色128g 15号我们都能知道，好，这就是我们最终混合得到的结果，这个结果的零就是我们真正要去的页面，那接下来我们就直接跳转就行了，location.h ref。我们来跳转去一个位置，去哪个位置，我们直接把这一块复制过来，来我们去这这到底是几号，我们来拼接上就行了，走，我们就把这个filter element我们来拼接。好，这就是我们最终写好的效果，CTRLF9来刷新一下，来看一下效果来刷新，当然选中某一个以后，它就会跳过去，那现在是绿色256没问题，我选白色256，我点个白色好跳到白色256，我们回线也正确，然后呢，我们来选白色128，跳白色128，诶我们也正确跳转，包括黄色128都可以正确跳转，那这就是我们点击SQ的切换功能，主要就是我们前提，只要每一个值它涉及了哪些SKU我们知道，那切换起来就非常容易了，那么商品详情页的页面渲染效果我们就结束了。