jquery获取被点击元素中的值

Question

<button id="btn" data="1">1</button>
<button id="btn" data="2">2</button>
<button id="btn" data="3">3</button>
<button id="btn" data="4">4</button>
<script src="http://cdn.bootcss.com/jquery/2.2.0/jquery.min.js"></script>
<script>
    $('#btn').click(function(){
        var p = $(this).attr('data');
        alert(p);
    });
</script>

我自己的代码如上，总共有四个按钮，但是只有点击第一个按钮的时候才有效，其他的都无效，求讲解

Answer 1

id是唯一性的, 不能设置4个...
改成class

<button class="btn" data="1">1</button>
<button class="btn" data="2">2</button>
<button class="btn" data="3">3</button>
<button class="btn" data="4">4</button>
<script src="http://cdn.bootcss.com/jquery/2.2.0/jquery.min.js"></script>
<script>
    $('.btn').click(function(){
        var p = $(this).attr('data');
        alert(p);
    });
</script>

Answer 2

虽然没有强制要求，但是个人认为每一个元素的id应该是唯一的

<button class="mybtn" data="1">1</button>
<button class="mybtn" data="2">2</button>
<button class="mybtn" data="3">3</button>
<button class="mybtn" data="4">4</button> 

    $('.mybtn').click(function(){
        var p = $(this).attr('data');
        alert(p);
    });