点击切换图标方法,jquery bootstrap方法
2016-08-17 17:30
351 查看
我是真菜,用了半天,没有实现自己的效果,首先,我想的是利用attr的方法找到button的时候,触发span的改变,把class的属性里的图标进行改变,可以实现这个功能,但是出现了一个bug,我是取的所有的button ,还有所有的span ,换句话说,我是将所有的图标都进行切换了,而且不能够切换回来,方法不太好,因为我是直接调取的class方法,没有用到ID,由于ID才是唯一的,所以我这个方法不靠谱,只能以后再说
后来想能够切换的方法
利用toggleClass可以反复调用的方式,开始实现这个功能,但是发现有两个不足之处,第一,他需要button和span 两个id,需要调用太多,而且要反复写四遍,我觉得高手应该不会这么写,我虽然还是菜鸟,但是也不想用傻办法。
然后我咨询了别人,好像可以用别的方法实现
但是只能点图标,不能点按钮,因为click事件只绑定在span里,所以只执行span ,没有到dom,button那一级,所以有问题,后来在修改
今天总结经验,轮子是好的,关键是自己揣摩自己造轮子,不能单纯的用方法,这样起不到应用的效果,还是得多思考,多想办法
$(document).ready(function(){ $("button").click(function(){ $("span").attr('class', 'glyphicon glyphicon-minus pull-left'); }); });
后来想能够切换的方法
$(document).ready(function(){ $("#one1").click(function(){ $("#one").toggleClass("glyphicon glyphicon-minus"); }); });
利用toggleClass可以反复调用的方式,开始实现这个功能,但是发现有两个不足之处,第一,他需要button和span 两个id,需要调用太多,而且要反复写四遍,我觉得高手应该不会这么写,我虽然还是菜鸟,但是也不想用傻办法。
然后我咨询了别人,好像可以用别的方法实现
$(document).ready(function(){ $('.accordion-group').find('span').click(function(){$(this).toggleClass('glyphicon-plus-sign glyphicon-minus')}); });
但是只能点图标,不能点按钮,因为click事件只绑定在span里,所以只执行span ,没有到dom,button那一级,所以有问题,后来在修改
$('.accordion-heading').click(function(){$(this).find('span').toggleClass('glyphicon-plus-sign glyphicon-minus')});
今天总结经验,轮子是好的,关键是自己揣摩自己造轮子,不能单纯的用方法,这样起不到应用的效果,还是得多思考,多想办法
相关文章推荐
- jquery点击图标来回切换的几种方法(如开关按钮)
- jquery 点击切换面板及图标
- Jquery实现点击切换图片并隐藏显示内容(2种方法实现)
- Win10设置点击任务栏程序图标进行窗口切换的方法
- Jquery实现点击切换图片并隐藏显示内容(2种方法实现)
- freemarker文件下,bootstrap 点击按钮,切换按钮上的图标
- jquery 点击按钮切换样式on方法使用
- jquery点击切换图标(比如刷新图标,静态变动态图片)
- 关于jquery插件placeholder 1.3在chrome和safari下点击后不消失的解决方法
- jQuery 效果 - slideToggle() 方法 (在隐藏和显示之间切换)
- jQuery效果 slideToggle() 方法(在隐藏和显示之间切换)
- JQuery入门――事件切换之toggle()方法应用介绍
- JavaScript Tag标签切换实现的几种方法 原生js + jquery
- jquery 点击函数切换 toggle()
- 用JQ中的fadeOut和fadeIn方法,当点击上一张和下一张按钮时进行图片的切换~
- jqueryui autocomplete 插件 点击 显示选项设置方法
- JQuery入门——事件切换之toggle()方法
- jQuery两个有意思的切换方法
- Jquery(Ajax)load使用方法 结合radio切换视图
- 两个Select标签内容多选切换之jquery方法