00:00
接下来我们继续来编写页面的渲染效果,那么现在要做的事情呢,就是咱们选中某一个属性以后,或者选中品牌分类,那在这呢,动态的拼接上它新的这个参数,比如我们的brand ID等于我们指定的值,然后接下来我们就进行一个再次的筛选查询,那相当于每点一个,那么就要动态的拼上这些属性值,那这一块呢,我们就来到页面,我们这个页面我们先来看品牌,无论是我们的品牌手机分类,包括这些属性点了都要跳,所以呢,我们给每一个最终的这些要跳的超链接,那么最终呢,我们都让它调用一个统一的函数,比如我们在下边来声明上一个函数,那为了方便期间我们将所有的跳转方法,我们都来声明成我们来指定的这个函数,好在最下边我们呢,就叫function。我们呢,有一个函数就叫search products,就是我们的检索商品,那这个函数呢,最终会跳到我们指定的位置,好,我们先不跳,我们大家伙呢,都来调用这个函数,我们来到上边CR home先来到我们这个品牌,品牌原来的这个超链接在这儿,它是跳到这个位置,我们来重新给它改掉,我们就叫th ref,这是它原来的,我们现在新的要这样做。
01:22
我们说它呢,想要跳转,我们以前想要调函数,我们这么来调的javascript,比如冒号来调了一个什么hello,哪个方法,那这一块呢,都应该是一个动态的方法名什么不变,但是方法的参数我们得看一下,好,所以呢,我写一个Dollar符大括号来动态取值,取什么呢?前面的固定不变javascript,然后呢,我们想要调用一个script,我们想要调用我们的这个方法叫search products,好,那为什么我这一块要写Dollar大括号动态取值,我们先来想啊,我们想要跳转到的地方,那应该是我们原来的这个地方,加上我们新拼的这个参数。
02:08
所以呢,我们必须调用这个方法的时候,我们给他指定,那相当于要新加什么参数,那么就来指定参数名和参数值,所以呢,我们调这个方法接收两个参数,第一个呢是参数的名字,第二个是我们参数的值,而我们现在参数的名字,我们就叫brand ID,这是我们参数的名字,而参数真正的值我们要动态的取出来,因为我们选中了某个品牌,我们就要取出某个品牌,我们直接拿到当前品牌,我们到大括号就不用写了,我们把整个平创都写在这个里边,那拿到品牌的品牌ID,好,我是这么来写的,而且这个东西呢,它也是一个字符串量,所以呢,我们给它变为字符串,我们来加上这一种特殊的转移字符,它是一个字符串。CTRLF9,我们来把这个页面重新编一下,那现在来看我们的效果,我点一个刷新,那这个刷新如果页面出不来效果,那说明我们这一块构建的时候出现了问题,来看一下我们这一块的问题,那问题就是我们这个表达式出现问题,这个问题呢就是我们的这一块。
03:17
他说我们这个特殊字符有问题,它在这呢没法处理,就是我们的这一块表达式,我们把这个brand ID好,我们不加这个转译了,往CTRLF9让页面呢重新编译一下,我们现在来看它给我们调用这个方法的时候呢,会进行传参,好我们来鼠标。放到这儿,它调用我们这个方法会传入brand ID,然后呢再传一个九,那这个东西呢,要是一个字符串,那么这个字符串呢,我们就给它正确的来拼接上这个字符串,那么就直接用它的转移字符,我们HTML中单双引号的这些转移字符,比如我们就用这个and court封号,这就是我们的双引号啊,我们来放在这CTRLF9,这样呢才能把它变成一个字符串,然后我们来看一下我们页面的这一块效果保证呢,我们鼠标放在这儿,好,Brand ID传的是一个字符串,那这就是一个常规量了,要不然传一个brand ID,它还要动态取出brand ID,好,那相当于呢,我们现在传了一个品牌的。
04:22
信息以及品牌ID,这是它的查询条件,这是查询条件的值,那来到我们的这个方法,我们最终想要拼成什么呢?我们要拼成它原来的值,我们现在想要跳转的页面是原来的。页面,那原来的我们的查询条件可能有这么多,然后再拼接上我们新的这个请求,那新的这个请求怎么拼呢?我们拿到原来的页面,原来的页面我们可以这么来拿,我们在location,我们有一个对象叫location.h ref,我们如果调用它这个方法,那我们就会获取到它原来的值,我们给它原来的值再来动态的来拼上,我们来让它加上,拼上什么呢?我们来按我们拼上一个新条件,那们新的条件呢,我们会传来我们条件的名字和我们要用的条件的值,我们就来拼上新的我们这个名字和值,加上它的名字是这个,再来加上它的值呢,也是我们传过来的Y6,然后呢,这是我们新的要去的地址,那我们想要跳转到这,那继续,我们给搂开声h ref,再附一个值就行了,那我们就跳转到这个位置了,CTRLF9来试验一下。
05:36
他们这次结果呢,好不好使,我来刷新,那现在我们来要跳转品牌,我选中一个品牌,那现在查出来的手机呢,有华为,所以CPU型号还有华为,当我们来选中品牌以后,相当于品牌ID,要拼上品牌ID12,我们看这一块能不能拼上,我来点好拼上了品牌ID12只剩下我们的苹果了,那剩下的所有手机都是我们检索到的苹果手机,那么这一块呢,就拼的没问题了,这块拼的没问题,那我们的下边这些也一样,那选中分类,我们现在呢,要拼上我们分类的ID是我们指定的值。
06:12
那么就在这一块也一样,我们来找到我们分类的位置来看,我们来调用这个检索方法的时候,所有的检索方法都像我们这样调用品牌,我们来往下边找,这是分类,分类呢点它我们想要跳到一个地址,那跳到哪,我们来附上值TH,冒号RF,我们跳到我们指定的这个位置,好我们把这一块呢拿过来,这是我们的表达式,主要的这个表达式里边我们要传入,我们现在要用哪个参数,那分类呢,我们会传一个参数叫CATALOG3ID,好我们把这个呢CATALLO3ID,这是我们查询参数的。参数名。那值呢,那就是当前分类的ID,好,我们直接拿到当前分类的ID就行了,点一个分类ID,那我们相当于就拼到了我们这个分类信息,我们分类信息想要检索还是一样,我们来这个方法的所有作用就是拼上原来的,加上我们这个新的CTRLF9,那现在来看一下效果。
07:20
我来刷新,如果我们现在没有选中分类,我们来直接来查我们所有的东西,我来选中一个分类,先拼上我们分类ID这块,404,大家注意,如果说我们前边任何一个参数都没有,我们必须呢,是以问号开始的,那这样才能查出来,所以我们在这拼参数的时候呢,一定要注意,如果我们包含问号了,那就直接拼,如果没包含问号,我们一定呢拼上问号再来加东西,好,所以我们这一块的写法我们就重新来变一下,我们在这来拼参数,我们得判断,如果说我们原来的这个值,原来的这个值它是一个字符串,来判断它有没有这个包含contents,我们的这个问号,如果包含了,那我们就直接给它上边平按的这些查询条件,如果没包含else,那我们的这个值,那就应该相当于我们是第一个条件。
08:19
那么就拼上问号,我们这个name等于什么什么,那么这个东西呢,要是一个字符串,所以我们来把它的值我先拿来,我来画一个。Ref,我们原来的h ref的值,它加一个字符串,那么就来判断这个里边有没有包含问号这一块呢,应该是一个加好我来CTRLF9。然后呢,我们现在来做一个测试,好我们来重新刷新,那现在来第一个呢,我们来点一下,他应该给我们来拼上这个问号,但是我们现在点这个没反应,那说明我们这个方法呢出问题了,我们这个content没有这个方法,那么来就来查询文档,我们这个W3SCHOOL来看GS判断我们这个字符串包含它用哪个方法,Javascript里边我们来找它的这个字符串对象,好字符串,我们来看这个字符串里边都有哪些方法,字符串参考手册。
09:13
它的这个方法里边肯定能判断我们有没有包含指定的这个字符串,那在这儿有非常多方法,包括这些match,它都可以用正则来进行匹配的,那么可以来使用这个最快的,我们就用这个in this of来判断字符串在我们哪个位置,比如我们来判断我们这个hello,它在哪个位置,比如我们来匹配到了它开始的位置,从第一个索引开始,包括word word呢,它没匹配到,因为我们是小word,那它就是负一,匹配不到就是负一,匹配到了那就是不是负一,所以我们就来用in对二五来做一个判断就行了。它点index of,我们来判断这个问号在哪个位置,只要它不等于负一,说明那就是匹配到了,匹配到了直接拼,匹配不到呢,我们来加上CTRLF9,把这个代码写好以后,我们来重新来刷新走,把这一块呢,我们来删掉,我们来看一下我们的页面效果,我先来选中了手机,点好我们给手机呢拼上了225没问题,然后呢,我们再来选中一个品牌,点我动态又拼上了品牌的ID,没问题,然后呢,我们再来选中某一个属性也要拼上,那我们现在来到我们属性的位置来,我们来找到属性的位置,Search products。
10:30
我们现在给品牌拼上了,给我们这个分类呢,也拼上了,将来所有的属性,只要点超链接也都得跳过去,好,我们把这个拿过来,他们想要跳在哪个位置,我们在这儿来指定上我们F。那哪个位置呢?来点开看一下,我们把这一块的内容还是拿来,我来复制过来,CTRLC好复制过来。我们放到我们这一块的位置,那现在我们要拼的参数,我们所有的检索属性都叫at ts,所以如果我们有一个属性,我们的规则是这样的,At ts。
11:10
等于,比如我们一号属性的值是我们什么A13仿生,那是这个,假设它是一号属性,想要传入我们这个值,是传入属性的ID,凭个短横杠和我们选中的这个值,那么属性名呢?传at t RS,好,我们把这个值传过来。属性名at ts已经传过来了,而它的这个值我们来给它拼上。值的这一块呢,就比较复杂,首先我们得给它拼上我们当前属性正在便利的属性的D,属性的at TD TD,我们来找一下这个Y6是直接属性值,那at TD是在我们上一个遍历。这个TH是在这个里边的,所以我们拿到at t RA才能取出at TD,好at t ra.at t rad拿到属性名,然后呢,我们再来给它拼上一个短横杠,这个短横杠呢是两个之间的,我们最后再来拼一个值,我们这一块可能语法写错了,我们来看一下效果,现在呢,加了at t好短横杠我们来拼上,现在我们再来加一个。
12:19
Ad加ID,还要加上我们当前的Y6值,这是我们选中的这个值。这是逗号,前面是我们第一个参数叫at ts,第二个参数的值是我们动态拼的一个串,CTRLF9来看一下最终的效果,我再来刷新。比如我选中了。这个属性是A13仿生,我点一个,那么这一块呢有问题,但是我们来看我们拼的值对不对,At ts,我们传的这个值16 a13仿生,这应该是一个完整的字符串。所以呢,我们同时给我们的这一块的值,我们前后呢也都打上字符串,好打上这个字符串标识逗号,前边是字符串逗号,后边也是一个双引号,我们这个值呢,也是一个双引号,CTRLF9,因为我们这块呢要传入了中文,好我来刷新一下,现在我们来看一下效果好,我们在这拼了一个15杠,以官方为准,包括来选中A13仿生,诶我们发现我们拼上了at t rs16a13仿生,我就查出了所有CPU的型号是A13仿生的,包括CPU品牌,我们再带上,你查到这些商品就拥有这一个属性,我们选中呢,肯定就都是这个属性,那我们这一块呢,就将条件动态的拼装上了,我们没有在这儿来做多选,那多选呢,无外乎就是把这个值多拼两个冒号,把我们再来选中的值再来拼一下,这个细节呢,我们先就留到这儿,现在我们都拼好了,我们就可以来整个筛选商品了,我们来测一下,好,我们来手机。
13:53
分类下有这么多的,我们来只查A13仿生的CPU型号的,点一下CPU型号是A13仿生的,那只有苹果手机,如果我们拥有更多的检索属性,我们一直点,我们就能检索到更多的内容,那么这一块按照属性的筛选我们就拼接好了。
我来说两句