00:00
我们再来细化我们的页面效果,我们为它呢加上排序功能,包括我们后来的整个按照价格的区间筛选,那这一块排序呢,我们先来参照我们的页面模板,好我们页面模板,那这一块呢,有个综合排序,我们应该在这儿来审查元素,来找一下这些元素都在哪,我们来准备来修改它们,好CTRLF走,那么确实是在这儿,那接下来我们要做的第一件事情,我们想调排序呢,首先我们的需求是这样的,我们如果点了某一个东西来进行排序,比如我们是按照综合排序,销量还是价格,我们点了销量,那我们就给前端组装一个这样的格式,我们来提交过来,我们相当于排序字段呢,是叫sort cell count什么什么,当我们有多种不同的排序,还有我们的什么SQ price等等这些排序,那传入是那按照哪个属性升序还是降序排列,这是第一种,第二种,那么排序呢,肯定还得有一些页面效果,比如我们这是一个默认排。
01:01
句来点一下按照升序降序,包括香量,再点一下默认呢,比如我们是按照升序,再来我们按照降序,而且我们选中哪个,哪个应该是加红显示的,那先来看一下这个红色效果,走红色效果呢,就是它给这设置了一个背景,想他给这些A标签,诶这个东西呢,是个A标签,它给NTHH差的一相当于第一个A标签设置了这个背景,那我们选中的我们就应该设置这个背景,那为了我们整个效果好做期间我们为这些排序的所有A标签来加上一个统一的class,这个class呢,我们就叫sortt sortt我们叫A,这是我们可排序的这个A标签,好,我把这几个呢加过来,我把这几个加过来,我们就先来加上这三种效果。那我们这三种效果呢?我们先上来为他们来绑定单击事件,我们可以在这儿为所有的这些A标签绑定单击事件,因为我们点击以后要触发排序功能,所以我们再来点一个salt a,我们全部给它们来绑定单击事件,来写一个function,这都是杰克瑞的写法,那这个单击事件里边。
02:11
我们先要做的第一个是无论点谁,我们先来给他加上样式效果,而且呢,把其他人的样式效果去掉,所以呢,我们现在来加样式效果,那相当于是加这几个,那我们来点当前被点击的元素,当前被点击的元素变为。选中状态,那么这个选中状态呢,主要是来加这些样式,Color什么,还有border color以及background。好,我们就来加,首先当前被点击的元素,Dollar for this,这代表我们当前被点击的元素,然后点要改变它的样式。在我们解克瑞里边有这么一个方法,我们可以来参照杰克瑞的文档手册,要操作样式呢,下边有一个叫CSS方法。
03:00
我们可以来给某一个元素来指定样式,这个呢是取出color的值,那我们可以通过CSS传入一个对象的方式给它指定批量的样式,所以我们就来写一个CSS加CSS,那我们的样式呢,就应该是这样来看这一块的写法。属性名是这样的,然后属性值我们来包括起来,好,我们就在这儿来写上属性名,我们就叫color,我们想要给它指定颜色呢,是这个值,这是我们第一个要设置的样式属性,第二个要设置的样式属性叫border color是我们指定的这个值。好,我们把这一块呢复制过来,还有我们第三个样式属性。来加上叫background,我们的这一块我们叫。它的值把这个颜色呢复制过来井号是吗?好,现在我们每点击一个元素,我们呢先为它加上样式,而且呢,一定注意我们在后边呢,Return一个false return false的作用就会禁用默认行为,诶这个禁用默认行为,因为默认行为我们这个A标签可能会跳转,禁用默认行为我们的这些A标签啊,它每一个都写了一个超链接地址,它可能会跳到这个地址。
04:20
我们可以把这个地址删了,让它不跳,或者我们直接绑定单击事件的时候,我们给它进入掉默认行为,它也就不跳了。来CTRLF9,我们先来看一下我们页面效果,我们点击某一个元素,先来加上样式,好们来点了销量,我们来倒退刷新一下,好,我们来刷新,刷新页面改掉了,我们来点销量,销量样式加上了,点价格,价格样式加上了,那么应该点某一个的时候,我们点销量的时候,相当于我们只按销量排序,其他的同类标签没有这个样式,那没有样式的人,我们可以来看一下,没有样式的人他们对应的。这些borderder之类的值,比如这是A的hole,它放在上边,那不放上边,这都是这些黑颜色的边框,从borderder的颜色就应该是变成这个样子了,这是我们说的先给当前元素加,然后在加之前把它们的同类清空,好我们找到它们的类点一个都是这个salt a元素,把它们同类呢样式给它清空,这个清空呢,就是恢复它们的默认样式,它默认样式呢,我们来看这几个属性都是什么样的值。
05:30
好。首先它们的颜色,颜色呢,都叫井333,我把这个333我来复制过来,好,CTRLC我们在这一块颜色是井333,然后呢。我们的border color,我们来看这个border color,这是我们border边框,边框的颜色是CCC,好,那我们三个CCCC,然后呢,我们background ground的颜色是三个F,好,我们来三个F,这时候呢,没选中状态的。所以我们这个呢,相当于是来清空样式,来CTRLF9来页面重构一下,我们来重新刷新,来看一下我们的样式先能不能加上我点销量,它呢应该不跳转,但是我们这一块呢给跳转,跳转的原因呢,就是我们这一块呢,方法都调用错了,我们就没有正常执行好,我们CTRLF9来重新来刷新一下,我们倒退好,我来刷新,刷新来点击销量,好,那把这个样式去掉了,点击价格把这个样式去掉了,我们现在只以这三个为例,然后呢,还要做的就是当我来点击销量,我们默认呢是升序排列,我们再来点一个销量,它又变成一个降序排列,所以我们每次点击这个元素,除了给它加降式外,还要改变它的升降序,那么在这呢,批注了一下,哎,这块呢,是改变我们这个当前元素。
06:51
以及咱们这个兄弟元素的样式,元素的样式,然后呢,接下来我们还要做的就是改变它的升降序,因为这个升降序我们后来还要感知升降序,所以呢,为了感知它是升序还是降序,我们就给当前元素呢,比如我们这个销量来给它加上一个样式就行了,比如这个CSS,如果我不加样式,或者加了asc,那就是升序,不加呢,那就是降序,虽然这一块呢,默认是降序,算了,我们应该是加DEC吧。
07:26
如果加了那就是降序,不加默认就是升序,我们现在呢,就是希望是这样,所以呢,我上来做一件事,用当前元素,我当前元素点一个,它呢有一个解克瑞方法,叫我们来倒退过来,它叫tango CSS,我们这个tango class,诶就是切换我们这个样式,这个样式呢,有就变成没有,没有呢就变成有,所以我们就可以用这个方法,好,我们就给当前元素切换样式,这个样式呢,我们相当于动态加一个DEC,或者不加,那加上那就是降序,加上就是降序。
08:05
不加就是升序,所以我们希望来改变它的升降序,CTRLF9来给大家看一下我们的页面效果。这个效果呢,那我接下来点,比如我来点综合排序默认它,那没有这个DECSC之类的,我点一下好加上了DECSC,我再点一下又没有了,我再点一下又加上了小量一样,我点一下加上了,我再点一下没有,所以我们这一块呢,到底是升还是降,我们也可以来给它加上这个页面的显示效果,怎么加这个显示效果呢?我们就来判断,如果当前元素的这个class,我们能不能拿到当前元素的class,当前元素第二来看它拥有没有拥有某一个指定的class,那这呢有一个判断方法,叫我们这个汉字class之类的,我们来找一下,在筛选里边有一个hands字class,我们可以来调用方法,他呢帮我们来返回true货false,来判断某一个元素是否拥有某个样式,好,那就来判断当前元素hands字class是不是拥有我们这个decc,如果呢,拥有这个,那它就是降序,那降序呢,我们就显示降序效果。
09:18
果,否则呢,就是升序,那升序呢,我们显示升序效果,那这个升降序呢,我们最快的方式就是给它加一个上下箭头,这样就能快速显示,所以呢,如果是降序,我们把当前元素的这个文本值,我们来给它替换一下,好当前元素点我们可以先拿到它默认的这个文本,比如它叫销量还是啥,我们拿到这个文本值,我们使用test拿到它默认的文本,好,我们来拿到默认的这个文本,这是它原来的文本值,给他追加上,追加上一个什么,如果是降序,我们就加一个箭头下。这个下箭头我来打一个这个样子,所以呢,我们这个当前的文本,那就应该是这样,我们来给它附一个值,This,点一个test,我们当前选中的元素的这个文本值等于我们最新的这个值,好,我们把这个拿过来,这是我们做的这样子的一个效果,否则呢,我们就是升序,那升序呢,我们就应该是拼一个上箭头,就叫一个咱们这个上,我们来CTRLF9给大家看一下我们的效果,我们来进行一个刷新。
10:24
我们先来点击销量,好,这是下箭头,再一点那就是上,再一点那就下,其实我们相当于只要拼一个就行了,它现在呢,拼的有点多。因为每一次都是拿到原文本给后边拼,那我们要做的就是把这个原文本拿过来,我们这个原文本拿过来。我们应该不是在后边拼,我们是把这些后边的上下箭头截掉,或者呢,我们直接把原来的这些上下箭头替换一下就行了,我就这样来写点一个replace,我先来调用替换方法来看杰克里边我们拿到的这个文本呢,是一个字符串,字符串的所有操作我们GS呢都支持,我们来参照W3SCHOOL的这个文档手册来看一下我们对字符串的操作。
11:08
在javascript里边我们字符串,我们想要替换,在字符串里边来调用它的这个替换方法,来找一下看有没有什么替换方法,那这呢有一个叫replace,那正好是替换,替换就是把我们指定的我们还可以传正则表达式替换成我们的值,好我就把这个替换,把它原文本内容,我们把这个上下箭头,无论你是下箭头还是上下上箭头,我先给它替换成空串。相当于我先把它们都滞空,这是我们的最终的文本,我先这个test滞空,然后呢,我再给它的后边拼上升序还是降序,这个最终等于它加上我们现在呢这种情况,那就是这个顺序,但有可能啊,这个里边还有我们之前的降序符号,所以呢,我们除了把它剃完以外。
12:02
我们还应该继续替换,来来,多替换一下,除了替换它,我们再来替换我们这个上箭头啊,我们都把它替换成空,那每一个呢,我们都这么来做,每一个都这么来做,先把这一块的默认内容我们来给它替换掉。接下来这个替换呢,就是这个上箭头,我们最终的文本就是上箭头,然后我们用我们最终的文本内容走来,上边呢也一样来写这种办法。当然大家在这呢,写正则也一样,CTRLF9,我们来看一下我们的页面效果,我来刷新一下,好,我点一个销量,这下我们再上再下上好,现在呢,我们希望这种呢,如果是下,那就加了decc,那如果是上那就没加,那我们就应该动态的根据它是上还是下来最终决定它是升还是降,另外我们的样式呢,就是我们来点其他元素的时候,把他兄弟的这个升降号也去掉。好,我们除过把他兄弟的样式清空外,还要把他兄弟的升降号去掉,我们来找到他兄弟的这个升降号点一个。
13:09
So,他A,他们兄弟的每一个文本都要变,所以呢,我使用each齿方法,我来进行遍历,这个each齿呢,是我们解克瑞规定的我们这个遍历对象,那可以来写一个方式回调函数,我们来遍历每一个它的这个兄弟元素,先把它们的升降号都去掉,所以呢,我们还是这样,我们拿到当前元素原本的默认值,把他们这个全部升降号替换掉,然后呢,当前的值也不用拼升降号了,那就是这个默认值,只有我当前元素走到下边,我们才需要拼我们这个升降号。所以前面这一堆这都是样式,我们把这个样式改变的方法,我们就抽取出来,就叫function式。甚至。Style来改变我们这个样式的,然后我们这个style呢传过来,主要这里边还要传一个this this是谁。
14:02
我们呢,就让它传过来,相当于传入我们当前元素,我们只要改我们自己当前元素的,那将所有的这个this呢,This我都替换成我们传过来的当前元素,我要改哪个元素,我们就来写哪个元素,把这个this都来替换掉,好这一块呢也一样。然后我们来调用这个change style的时候,把我们这个被点击的当前元素this对象传过去。这我们来第一件来改变样式,我们来先来看我们这个样式的页面效果,有没有这个效果,我来刷新一下。好,我们来点击销量升降没问题,点击排序升降没问题。但是这个升降的时候呢,把他兄弟的这个升降号没有去掉,来看一下我们的样式,诶在这这呢,我们当前便利,我们就是要去掉当前元素的,而不是去掉我的这个的,所以我们这一块的this不能变。要去掉他们所有便利的当前元素,把每一个呢改掉啊。
15:03
我来再来看一下页面效果来升降好没问题,这个升降好,兄弟的这个都改了,那么接下来到底是升还是降,我们就来参照有没有加这个class,这是我们说的第一种情况,第二种我们除了改变样式外,我们还要给它跳转到指定位置,然后我们来跳转,跳转到指定位置,那跳转到哪个位置。主要是我们要按照前端的要求拼一个salt这样的排序规则,好拼一个这个,那这个排序规则呢,我们直接给原生的URL里边进行拼就行了,我们以前呢,抽取了一个这个替换的方法,这是替换,但我们第一次呢,拼还是添加,那么最好呢,把这个方法改造一下替换和添加,如果说我们第一次要拼这个属性的KV值,我们这里边没有,那就添加,如果有那就替换,那替换呢是下边的逻辑,我们在这儿来加上如果。
16:01
没有就添加就就替换,那我们以后呢,想给UI了,后边添加东西,我们都直接可以来调用这个方法,好我们可以来判断if,如果我们当前的这个URL地址,诶,这是我们的老URL地址放在外边,那么这个老URL地址有我们指定的这个东西,那有怎么判断有呢?我们之前判断过。直接可以调用INDEX25来判断,我们如果有我们指定的我们这个属性名啊,INDEX25它不等于负一,那就说明我们这个有,那有呢,那就是替换。我们来调这个方法,那没有呢,那就是添加else,我们来调下边的这个方法,我们让新的字符串哇。新的字符串就等于老的这个URL地址,因为我们是添加来加上我们一个暗的符,把我们新传来的KV,我们来往这一加,K呢就是它,V就是它,那我们这都拼好了,K等于V,好,我们来加上这一串就行了。
17:16
而且到底是用and复拼的,还是用问号拼的,我们这还得判断,如果我们这个UR里边没有任何一个参数拼装,那么就要开始拼问号,所以我们之前呢,好像还做过这个判断,好,我们之之前把这个呢,我们继续拿过来。我们在这来进行判断,就是我们说的这个老的这个URL。如果不等于负一,那就是有有的话呢,我们就是调用这个方法,哎,我们的nu就是这个样子的。我们把这个nu呢放在外边。我们来给它进行赋值。Nul就等于我们指定的这个。
18:00
那否则呢,那就是拼问号形式的,好,我们否则呢,就用下边这个拼问号形式的。好。然后我们最终来return的这个URL,那以后呢,我们想给UR地址上拼什么东西了,直接调这个方法就行了,以前的方法呢,都能调用这个方法了。好,没想到。拼一个我们指定的这个thoughtt,那么就来调这个方法叫re replace and,添加啊替换并且添加给哪个UI里边替换我们给我们这个当前我们这个总是要给后边来拼这个字符串的,所以我们给当前ul里边来拼一个哪个字段,我们现在呢是叫salt字段,诶我们这个sortt字段,然后呢,要拼哪个值。我们在这一块呢,就得决定好了,如果我们当前元素由我们指定的这个decc,那就是我们降序,否则就是升序,而当前元素到底是什么,我们在这儿还得知道,所以呢,每一个点击salt a的来找一下这个HTMMR,每一个点了它的,我们还得知道当前它是哪种排序规则,这个怎么知道呢?比如我们来给一个自定义属性吧,我就叫salt salt的值是什么?
19:18
如果是综合排序,那综合排序按照这个需求,我们综合排序就是hot score,好它呢是这个叫hot score,那如果呢,是我们的销量排序,哎,我们相当于拿一个自定义属性标志一下,它是按照什么排序的,那销量排序那就是它,那否则如果是我们的价格排序,那就是我们指定的SQ price,好那接下来我们到底是哪种排序规则,我们在下边我们的。这个里边我们来拿到我们当前的排序规则和Dollar for this就是我们当前被点击的元素,我取出自定义属性的值,我们有一个自定义属性叫sot,它里边呢,标注了我是哪个排序规则哇。
20:03
我们的这个salt,这是排序规则,相当们前边这一串,那接下来是升序还是降序,那么还得继续来拼装,我们得判断,如果说咱们这个当前元素第二汉字class,就是我们上一次改变了样式以后,它拥有我们指定的这个样式,拥有指定的哪个样式呢?来看一下,如果它拥有我们指定的这个decc,那说明呢,它是降序。它会返回一个true false啊。如果它是处,我们就来写三元运算吧,好,它是真吗?如果是正,那我们呢,就来返回我们sot,加上一个我们叫杠DEC。否则呢,我们就来返回我们这个sot加个asc,好杠一个asc,然后我们最终的so就等于这个值,好我们想要进行排序的真正的值,那我们就是这个值。
21:08
我们相当于在这一块呢,拿到了我们想要排序的字段,我们最终拼成了我们指定的样式。从自定义属性里边,先得知道我们是用什么排序的,然后再来杠我们是什么顺序,要判断我们的class,最终我们给URL地址上呢,拼上它,拼上它以后呢,它最终给我们返回一个新的地址,我们就要跳转到这个位置好。CTRLF9,我们把这个页面呢,重新让它编一下来看我们的效果,好我来刷新,我们看我们能不能拼上我们指定的这个字符串,比如我来点销量点,我发现呢,现在是thought cell count DEC,好确定没问题,但现在这一块没效果,没效果的原因,因为我们呢这有顺序,如果有顺序的话,我们在这。还要动态的来回显,如果我们这指定了顺序,我们就要在这来回显我们的这个顺序。
22:04
所以呢,这一块呢,还有一个复杂的回显操作,但我们这一块的排序现在有了,行,我们现在不按销量了,我来按照一个价格,现在价格是无规则的,我们现在按照价格走,现在是按照价格降序排列好,那就是6299都在前面,5799在后边,好没问题,那么这一块排序就写好了,那下一节课我们再来给他进行回显。
我来说两句