点击切换图标方法,jquery bootstrap方法

我是真菜,用了半天,没有实现自己的效果,首先,我想的是利用attr的方法找到button的时候,触发span的改变,把class的属性里的图标进行改变,可以实现这个功能,但是出现了一个bug,我是取的所有的button ,还有所有的span ,换句话说,我是将所有的图标都进行切换了,而且不能够切换回来,方法不太好,因为我是直接调取的class方法,没有用到ID,由于ID才是唯一的,所以我这个方法不靠谱,只能以后再说

$(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‘)});

今天总结经验,轮子是好的,关键是自己揣摩自己造轮子,不能单纯的用方法,这样起不到应用的效果,还是得多思考,多想办法

时间: 2024-08-28 18:49:46

点击切换图标方法,jquery bootstrap方法的相关文章

jQuery滑动方法

jQuery 滑动方法 通过 jQuery,您可以在元素上创建滑动效果. jQuery 拥有以下滑动方法: slideDown() slideUp() slideToggle() jQuery slideDown() 方法 jQuery slideDown() 方法用于向下滑动元素. 语法: $(selector).slideDown(speed,callback); 可选的 speed 参数规定效果的时长.它可以取以下值:"slow"."fast" 或毫秒. 可选

jQuery slideToggler() 方法 -《狗嗨默示录》-

jQuery slideToggle() 方法  jQuery 效果方法 实例 在所有 <p> 元素上进行 slideUp() 和 slideDown() 之间的切换: $("button").click(function(){$("p").slideToggle();}); 尝试一下 ? 定义和用法 slideToggle() 方法在被选元素上进行 slideUp() 和 slideDown() 之间的切换. 该方法检查被选元素的可见状态.如果一个元素

jQuery.parseJSON()方法

jQuery.parseJSON()方法 jQuery 杂项方法 实例 解析一个 JSON 字符串 $(function () { var obj = jQuery.parseJSON('{"name":"John"}'); alert( obj.name === "John" ); }) 尝试一下 » 定义和用法 $.parseJSON() 函数用于将符合标准格式的的JSON字符串转为与之对应的JavaScript对象. 注意:传入格式有误的

jQuery css() 方法:设置或返回被选元素的一个或多个样式属性

jQuery css() 方法 jQuery css() 方法 css() 方法设置或返回被选元素的一个或多个样式属性. 返回 CSS 属性 如需返回指定的 CSS 属性的值,请使用如下语法: css("propertyname"); 下面的例子将返回首个匹配元素的 background-color 值: 实例 $("p").css("background-color"); 设置 CSS 属性 如需设置指定的 CSS 属性,请使用如下语法: cs

jquery 点击显示隐藏的三种方法

jquery点击显示隐藏的三种方法,从复杂到简单.使用jquery需要引用jquery库,如右所示<script src="jquery-1.11.3.min.js"type="text/javascript"></script>. 旁边按钮随着收缩展开发生状态变化,展开+变—,收缩—变+. 收缩效果: 展开效果: 一.HTML结构(盗用网上的) <body> <!-- 收缩展开效果 --><li class=&

jQuery on()方法绑定动态元素的点击事件无响应的解决办法

$('#check_all').on('click' , function(){ alert(1); }); $("#yujinlist").append(html); count++; } 以上代码执行时,点击#check_all时,alert一直没反应,后在网上查资料时,才知道on前面的元素也必须在页面加载的时候就存在于dom里面, 那原话是这样的: 支持给动态元素和属性绑定事件的是live和on,其中live在JQUERY 1.7之后就不推荐使用了.现在主要用on,使用on的时候

ubuntu12.04切换输入法 及 输入法图标消失的解决方法

切换输入法   ctrl+空格 输入法图标消失的解决方法 打开终端 输入killall ibus-daemon   结束ibus进程 如果ibus没有运行,会显示: ibus-daemon: no process found 然后 输入ibus-daemon -d 就出来了. 另外,打开系统设置/语言支持 最下面也有ibus,选择ibus. 不知道为什么这个有时候不管用.

jQuery on()方法绑定动态元素的点击事件

之前就一直受这个问题的困扰,在jQuery1.7版本之后添加了on方法,之前就了解过,其优越性高于live(),bind(),delegate()等方法,在此之前项目中想用这个来测试结果发现,居然动态生成的标签点击了没反应,而live方法却能够支持,于是乎到处查资料,问网友,结果找了好久在一篇文章中终于找到了答案... jQuery 使用on绑定动态生成的元素时,不能直接用该对象操作,而是选择其非动态生成的父节点然后再找到本身才能达到效果.大家看看源码就知道了.生成的按钮基数项on方法点击无效l

jQuery on()方法绑定动态元素的点击事件无效

之前就一直受这个问题的困扰,在jQuery1.7版本之后添加了on方法,之前就了解过,其优越性高于live(),bind(),delegate()等方法,在此之前项目中想用这个来测试结果发现,居然动态生成的标签点击了没反应,而live方法却能够支持,于是乎到处查资料,问网友,结果找了好久在一篇文章中终于找到了答案... jQuery 使用on绑定动态生成的元素时,不能直接用该对象操作,而是选择其非动态生成的父节点然后再找到本身才能达到效果.大家看看源码就知道了.生成的按钮基数项on方法点击无效l