切换图标-总结方法

整体思路：

点击某个li 元素，替换其中img标签中的src属性，且要让其他的所有兄弟li元素变为默认的图片。由于每个li元素的默认图片和要替换的图片都不一样。难度就在此。

需要注意的几个地方：

1. 每个li要使用的图片统一命名， 如：
   默认图片为： demo_d.png。点击切换图片为：demo_c.png

2. 可以使用纯js来书写，因为如果使用jquery来遍历每个li元素的兄弟节点稍微有点麻烦。下面的代码使用纯为jquery，没有使用原生js，使用每个li元素的class来遍历兄弟节点，具体看代码注释。

3. 如果各位看官有更好一点的方法，欢迎指正和分享。

<div class="personConLeft">
    <ul>
        <li class="0"><img src="../../static/img/personCenter/submit_d.png"/> <a >我的发布</a></li>
        <li class="1"><img src="../../static/img/personCenter/copro_d.png"/><a>我的合作</a></li>
        <li class="2"><img src="../../static/img/personCenter/promote_d.png"/><a>我的推广</a></li>
        <li class="3"><img src="../../static/img/personCenter/confirm_d.png"/><a>认证中心</a></li>
        <li class="4"><img src="../../static/img/personCenter/money_d.png"/><a>钱包</a></li>
        <li class="5"><img src="../../static/img/personCenter/set_d.png"/><a>设置</a></li>
    </ul>
</div>

var index = 10;
var flag = false;
var oldIndex = 10;
$('.personConLeft ul li').click(function(){
//          自己修改样式
    $(this).css({'background':'#488eff','left':"-90px"});
//          解除绑定的hover事件
    $(this).unbind('mouseenter').unbind('mouseleave');

    index = $(this).attr('class');
//          修改字体颜色/图片src
    $(this).children('a').css({'color':'#fff'});
    var img_d = $(this).children('img').attr('src');
    var img_c = img_d.replace(/_d/,'_c') 
    $(this).children('img').attr('src',img_c);

//          兄弟节点修改样式
//          修改字体颜色/背景颜色
    $(this).siblings().css({'background':'#fff'});
    $(this).siblings().children('a').css({'color':'#488eff'});

//          将上一个保存的li,恢复鼠标移入移出动作
    if(flag = true){
        $(this).siblings('.'+oldIndex).animate({left:"0"})
        $(this).siblings('.'+oldIndex).mouseenter(function(){
            $(this).animate({left:"-90px"})
        })
        $(this).siblings('.'+oldIndex).mouseleave(function(){
            $(this).animate({left:"0"})
        });
    }
    flag = true;
    oldIndex = index;
    //拿到兄弟节点的个数
    var len = $(this).siblings().length;
//           根据class，循环修改每个兄弟节点中的图片src
    for(var i=0;i<=len;i++){
        var img_d = $(this).siblings('.'+i).children('img').attr('src');
        if(img_d){
            var img_c = img_d.replace(/_c/,'_d') 
            $(this).siblings('.'+i).children('img').attr('src',img_c);
        }
    }
})