首页 > 如何给按钮添加事件,比如按钮是否点击过,被点击过执行什么,没被点击过执行什么?

如何给按钮添加事件,比如按钮是否点击过,被点击过执行什么,没被点击过执行什么?

<div>

内容

<button>按钮</button>

</div>
比如div 是个弹出框,按钮被点击后内容显示,否则隐藏?


用jquery的click事件就行

<script type="text/javascript">
    $("button").click(function () {
        //这儿写你的回调函数,也就是要执行的步骤
        //jquery也自带隐藏和显示功能。
        //比如$("button").hide()
    })
</script>

在点击后给div或button添加一个自定义属性 ’‘’data-clicked‘‘’,当点击过了设置为true,再次点击判断是否存在data-clicked属性或属性值是否为true,如果不存在或为false,那么显示内容,同时位置为true;如果存在并为true,那么隐藏,同时设置为false

使用data方法、addClass方法都可以

HTML

<div id="mydialog">
<span>内容~~~~~~~~</span>
<button>隐藏内容</button>
</div>

JSCode


$('button').on('click',function(){
    if(!$(this).attr('data-clicked')||$(this).attr('data-clicked')==='false'){
        $('div#mydialog span').show();
        $(this).attr('data-clicked','true');
    }else{
        $('div#mydialog span').hide();
        $(this).attr('data-clicked','false');
        //remove掉属性也可以
        //$(this).removeAttr('data-clicked')
     }
});
【热门文章】
【热门文章】