添加<i>添加响应事件，获取属性内容

使用的框架：JQ、Font Awesome、Vue

使用场景：在网上搬了一个<ul>树，想给这个树添加展开和收缩的动作，并获取<i>图标的action数值，以及父级<span>中的repairtypeId数值。

代码如下：

<ul>
	        <li>
	            <span><i class="fa fa-minus-circle"></i>BOS电脑故障</span>
	            <ul>
	                <li>
	                    <span repairtypeId='1'><i class="fa fa-minus-circle"></i>OFFICE故障</span>
	                    <ul>
	                        <li><span repairtypeId="2">OFFICE登录异常 
		                        <i action="post" class="fa fa-pencil-square"></i>
		                        <i action="put" class="fa fa-plus-square"></i>
		                        <i action="delete" class="fa fa-minus-square"></i>
	                        </span></li>
	                        <li><span>OFFICE对账问题</span></li>
	                    </ul>
	                </li>
	                <li>

　　显示如下：

 

 

 

 

 

 

 

 

 

因为标签不确定个数，我想批量添加，并在数据聚焦在图标上时显示为“小手”，所以直接使用了JQ进行DOM获取并绑定click事件。

变成小手的样式：

.fa:before{cursor:pointer;}

批量添加点击事件：

$(function(){
    $("i:not([action])").bind('click',function(icon){
        if($(icon.target).hasClass('fa-minus-circle')){
            /*关闭*/
            $(icon.target).parent().next().attr("style","display: none");//控制ul为不显示
            $(icon.target).removeClass('fa-minus-circle');//删除“-”图标
            $(icon.target).addClass('fa-plus-circle');//添加“+”图标
        }else{
            /*打开*/
            $(icon.target).parent().next().attr("style","display: block");
            $(icon.target).removeClass('fa-plus-circle');
            $(icon.target).addClass('fa-minus-circle');
        }
    });
});

获取数值：

/* icon为触发点击事件绑定函数的参数，target是为了获取触发点击事件的DOM元素 */
$(icon.target).attr('action');//因为直接触发的图标点击事件，action属性也是直接添加到<i>中的，所以通过attr直接获取
$(icon.target).parent().attr('repairtypeId');