Jquery中记住按钮选中状态-最详细&结合实际例子讲解

一，前言：
最近在做前端开发的时候，接到的任务中就有一个需要记住我们所点击对应按钮的状态，由于才刚做几天前端，所以一开始对于如何记住按钮状态简直就是毫无头绪，于是就百度了一下，如何记住按钮状态，结果发现，搜索的博客千篇一律，没有实际作用，也没有任何讲解，实在是有点失望。
也正是因为如此，所以我就打算自己搞清楚之后，写一篇详细的有质量的博客，通过昨天一下午的时间，终于搞懂了，所以接下来我们一起看看吧！

二，首先直接给大家看个图：

操作步骤：
1选择压力偏低按钮
2点击查询按钮
期望结果：
点击查询之后，压力偏低这个按钮显示为被选中状态
实际结果：
点击查询之后，压力偏低这个按钮显示未被选中状态

以上就是我们需要解决的问题：
解决问题的思路：
1要想让这个按钮记住被选中状态，那么第一件事就是要将这4个按钮进行区分，否则就无法知道是哪一个被点击过（下图中btn代表按钮类，btn-sm代表该按钮的大小，btn-primary代表该按钮会被默认选中)

2定义一个全局变量，并赋值为当前的id，用来保存被我们所点击的id值（在该报警类型的方法中，这样当我在执行的时候，这个id对应的类就会被加载，我们的按钮就被会显示选中）这里的$(e.currentTarget).addClass("btnprimary").siblings().removeClass("btn-primary");
方法作用是，当我们点击哪一个按钮时，该按钮就被被添加默认选中样式，同时会清除其兄弟标签的默认选择样式，这样就保证了每次只会有一个元素按钮被选中
大家可以看看如果不加.siblings.removeClass的效果

再看看如果不加siblings的效果

除了全部这个按钮是被默认选中之外，其他的无法被选中，因为一被选中，就被删除了，
所以这里使用siblings.removeClass的作用是删除其上下兄弟标签中的btn-primary，

3通过addClass(”btn-primary“)为被点击过的按钮加上btn-primary样式类名（这个就是被选中状态的样式，(对于addClass（）这个方法不熟悉的同学，建议看这篇文章，可以很好理解这个方法JQuery通俗易懂之常见的DOM属性

这样，我们每点击一个按钮，就会为该按钮添加上btn-primary默认被选中类

4这样就基本完成了，对按钮状态的记录
总结一下执行步骤：
简化思路：
点击具有唯一id的菜单项–为对应id加上选中样式类–通过加载该id显示
详细版：
1为按钮定义唯一的id
（直接在该对应的标签中定义id即可）
2定义一个全局变量，用来接收按钮所对应的id，添加到对应的执行方法中，保证在执行该方法的时候，加载该对应的类
3为我们对应的全局变量通过addClass方法，添加默认选中样式类名btn-primary

this.$el.find(`#${this.queryID}`).addClass("btn-primary");
//el是我所定义的