JavaScript和jquery实现连续点击按钮的不同状态切换

页面或者界面上经常会出现“点击某一个按钮然后切换不同的状态”的场景，将自己总结的两种实现方法分享一下。

JavaScript：

<button id="btn"></button>
<div id="status"></div>

<script>
    var obtn = document.querySelector('#btn');
    var ostatus = document.querySelector('#status');

    var flag = true;
    obtn.addEventListener('click',function(){
        if(falg){
            ostatus.innerhtml = "状态1";
            falg=false;
        }else{
            ostatus.innerhtml = "状态2";
            falg=true;
        }
    })
</script>

 jquery:

 <button class="manage-contacts-btn" status="closed">管理联系人</button>
 <img src="../../images/meeting/delete.png" class="c-item-delete"/>

 $('.manage-contacts-btn').click(function () {
                var btnStatus = $(this).attr('status');
                $(this).attr('status', btnStatus === 'closed' ? 'open' : 'closed');
                if ($(this).attr('status') === 'open') {
                    //这里就是状态1，可以写自己想要实现的需求
                    $('.c-item-delete').show();
                } else {
                    //这里就是状态2，同上
                    $('.c-item-delete').hide();
                }
            });

 案例不复杂，但是页面中用到的频率比较高，简单记录一下。