zoukankan      html  css  js  c++  java
  • 点击切换图标方法,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')});

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

  • 相关阅读:
    什么是webview
    juqery.fn.extend和jquery.extend
    LeetCode
    5. Longest Palindromic Substring
    42. Trapping Rain Water
    11. Container With Most Water
    621. Task Scheduler
    49. Group Anagrams
    739. Daily Temperatures
    3. Longest Substring Without Repeating Characters
  • 原文地址:https://www.cnblogs.com/alex-toni/p/5780911.html
Copyright © 2011-2022 走看看