5、支付效果

html

    <ul class="payment-type">
        <li onclick="show(this)">
            <img src="./images/alipay.png">
            <i class="fa fa-check-circle hide" value="1" ></i>
        </li>
        <li onclick="show(this)">
            <img src="./images/wechat.png">
            <i class="fa fa-check-circle hide" value="2"  ></i>
        </li>
    </ul>

css

<style type="text/css">
   .hide{
       visibility: hidden;
   }
</style>

js

<script type="text/javascript">
    function show(obj){
        console.log(obj);
        //先把这个节点的所有父类下的i都隐藏
        var childrens=obj.parentElement.children;
        console.log(childrens);
        for (var i = 0; i < childrens.length; i++) {
            childrens[i].children[1].style.visibility="hidden";
        }
         //接下来把当前这个li下的i显示
         var i=obj.children[1];
        //console.log(i);
        i.style.visibility="visible";
        i.style.color="green";
        //节点值备用
        var type=i.attributes[1].nodeValue;
        //alert(type); 
    };
</script>