javascript - 我怎样才能得到点击按钮的动态值 id 或 data 属性

Question

您好，在这段代码中，只有第一个按钮在点击事件时有效，但是当我点击第二个按钮时，我不想使用 input:button 因为我在页面上有多个按钮..

   <table border="1">
 <tr>
      <td>Name</td>
      <td>Email</td>
      <td>phone</td>
      <td>Btn</td>
    </tr>
    <tr>
      <td>user 1</td>
      <td>user1@mail.com</td>
      <td>123456</td>
      <td>
        <button id="btnids" data-id="a1" value="a1">active</button>
       </td>
    </tr>
     <tr>
      <td>user 1</td>
      <td>user1@mail.com</td>
      <td>123456</td>
      <td>
        <button id="btnids" data-id="a2" value="a2">active</button>
       </td>
    </tr>
     <tr>
      <td>user 1</td>
      <td>user1@mail.com</td>
      <td>123456</td>
      <td>
        <button id="btnids" data-id="a3" value="a3">active</button>
       </td>
    </tr>
    </table>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
          $("#btnids").click(function(){
            alert($(this).val());
          });
    });
</script>

谢谢!

Answer 1

属性 id 应该是唯一的。将属性从 id 更改为 class:

$(document).ready(function(){
    $(".btnids").click(function(){
      alert($(this).val());
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
  <tr>
    <td>Name</td>
    <td>Email</td>
    <td>phone</td>
    <td>Btn</td>
  </tr>
  <tr>
    <td>user 1</td>
    <td>user1@mail.com</td>
    <td>123456</td>
    <td>
      <button class="btnids" data-id="a1" value="a1">active</button>
     </td>
  </tr>
   <tr>
    <td>user 1</td>
    <td>user1@mail.com</td>
    <td>123456</td>
    <td>
      <button class="btnids" data-id="a2" value="a2">active</button>
     </td>
  </tr>
   <tr>
    <td>user 1</td>
    <td>user1@mail.com</td>
    <td>123456</td>
    <td>
      <button class="btnids" data-id="a3" value="a3">active</button>
     </td>
  </tr>
</table>