javascript - 如何给按钮添加事件，比如按钮是否点击过，被点击过执行什么，没被点击过执行什么？

Question

<p>

内容

<button>按钮</button>

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

Answer 1

用jquery的click事件就行

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

Answer 2

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

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

HTML

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

JSCode

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