点击切换图标方法，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‘)});

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

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

标签：

原文地址：http://www.cnblogs.com/alex-toni/p/5780911.html