如何在Jquery中获取data-id属性值？

Question

HTML代码

<tbody>
    <tr>
        <td>0</td>
        <td>204093D-P12</td>
        <td>80443</td>
        <td>Name</td>
        <td><span class="label label-success">Updated</span></td>
        <td><button class="btn btn-xs btn-flat" data-toggle="modal" data-id="204093D-P132" data-target="#myModal" type="button" title="Add" onClick="ShowModal()"><i class="fa fa-plus" aria-hidden="true"></i></button> | <button class="btn btn-xs btn-flat" data-toggle="modal" data-id="204093D-P132" data-target="#myModal_edit" type="button" title="Edit" onClick="ShowEdit()"><i class="fa fa-pencil-square-o" aria-hidden="true" ></i></button>| <button class="btn btn-xs btn-flat" data-toggle="modal" data-id="204093D-P132" data-target="#myModal_details" type="button" title="Details" onClick="ShowDetails()"><i class="fa fa-list-ul" aria-hidden="true"></i></button></td>
    </tr><tr>
        <td>1</td>
        <td>216619D-P18</td>
        <td>16009</td>
        <td>Name</td>
        <td><span class="label label-success">Updated</span></td>
        <td><button class="btn btn-xs btn-flat" data-toggle="modal" data-id="216619D-P918" data-target="#myModal" type="button" title="Add" onClick="ShowModal()"><i class="fa fa-plus" aria-hidden="true"></i></button> | <button class="btn btn-xs btn-flat" data-toggle="modal" data-id="216619D-P918" data-target="#myModal_edit" type="button" title="Edit" onClick="ShowEdit()"><i class="fa fa-pencil-square-o" aria-hidden="true" ></i></button>| <button class="btn btn-xs btn-flat" data-toggle="modal" data-id="216619D-P918" data-target="#myModal_details" type="button" title="Details" onClick="ShowDetails()"><i class="fa fa-list-ul" aria-hidden="true"></i></button></td>
    </tr><tr>
        <td>2</td>
        <td>21663P0012</td>
        <td>13116</td>
        <td>Name</td>
        <td><span class="label label-success">Updated</span></td>
        <td><button class="btn btn-xs btn-flat" data-toggle="modal" data-id="216693P0012" data-target="#myModal" type="button" title="Add" onClick="ShowModal()"><i class="fa fa-plus" aria-hidden="true"></i></button> | <button class="btn btn-xs btn-flat" data-toggle="modal" data-id="216693P0012" data-target="#myModal_edit" type="button" title="Edit" onClick="ShowEdit()"><i class="fa fa-pencil-square-o" aria-hidden="true" ></i></button>| <button class="btn btn-xs btn-flat" data-toggle="modal" data-id="216693P0012" data-target="#myModal_details" type="button" title="Details" onClick="ShowDetails()"><i class="fa fa-list-ul" aria-hidden="true"></i></button></td>
    </tr><tr>
        <td>3</td>
        <td>217496D-P078</td>
        <td>16032</td>
        <td>Name</td>
        <td><span class="label label-success">Updated</span></td>
        <td><button class="btn btn-xs btn-flat" data-toggle="modal" data-id="217496D-P078" data-target="#myModal" type="button" title="Add" onClick="ShowModal()"><i class="fa fa-plus" aria-hidden="true"></i></button> | <button class="btn btn-xs btn-flat" data-toggle="modal" data-id="217496D-P078" data-target="#myModal_edit" type="button" title="Edit" onClick="ShowEdit()"><i class="fa fa-pencil-square-o" aria-hidden="true" ></i></button>| <button class="btn btn-xs btn-flat" data-toggle="modal" data-id="217496D-P078" data-target="#myModal_details" type="button" title="Details" onClick="ShowDetails()"><i class="fa fa-list-ul" aria-hidden="true"></i></button></td>
    </tr>
</tbody>    

我必须尝试以下列方式使用Jquery获取data-id属性值

function ShowModal(){
      alert($(this).attr("data-id"));
}

但是返回undefined如何从jquery获取data-id值？我有另一个疑问data-id值可以保存数值或字符串值？

Answer 1

您需要在内联单击处理程序中传递当前元素上下文

<button onClick="ShowModal(this)" data-id="217496D-P078"></button>

然后使用传递的element引用来获取data-id.你也可以使用HTMLElement.dataset像elem.dataset.id

function ShowModal(elem){
    var dataId = $(elem).data("id");
    alert(dataId);
}

另外,我建议您使用jquery绑定事件处理程序而不是丑陋的内联单击处理程序.