![](/img/trans.png)
[英]How to use jquery to grab data-attribute in every button that was clicked
[英]Open button with different data-attribute with jquery
我有一个带有3个按钮的表,并且正在使用jquery- jquery-"3.2.1"
。
我正在尝试使用下面的javascript文件Builder
在if语句中稍后加载正确的数据。
我的expected output
是:
如果按f.ex .: Add CPU
按钮,则应显示警报消息console.log("cpu clicked")
。
您可以在下面找到我的最小可行示例:
class Builder { constructor() { this.events(); } // end constructor events() { $(".btn btn-primary btn-sm").on("click", this.ourClickDispatcher.bind(this)); } // methods ourClickDispatcher(e) { var currentButton = $(e.target).closest(".btn btn-primary btn-sm"); console.log("test") if (currentButton.data('exists') == 'cpu') { console.log("cpu clicked") } if (currentButton.data('exists') == 'motherboard') { console.log("motherboard clicked") } if (currentButton.data('exists') == 'graphic-card') { console.log("graphic-card clicked") } } } export default Builder;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <table style="float: left;" class="table table-bordered"> <tbody> <tr> <td>CPU</td> <td> <button type="button" data-cpu="cpu" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#exampleModal"> Add CPU </button> </td> </tr> <tr> <td>Motherboard</td> <td> <button type="button" data-motherboard="motherboard" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#exampleModal"> Add Motherboard </button> </td> </tr> <tr> <td>Graphic Card</td> <td> <button type="button" data-graphicCard="graphic-card" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#exampleModal"> Add Graphic Card </button> </td> </tr> </tbody> </table>
如您所见,所有3个按钮都具有相同的class
属性,但是要区分data-
属性以加载正确的输出。
有什么建议,如果单击任何按钮,为什么以下脚本没有给我expected output
?
感谢您的答复!
如果使用$(".btn btn-primary btn-sm")
来定位所有这些类的元素,则需要使用
$(".btn.btn-primary.btn-sm")
( 每个类都没有空格和.
,这是正确的css语法 )
其次,您的数据属性( 根据您的脚本 )应全部以不同的值命名为data-exists
,而不是为每个属性命名不同。
所以
<button type="button" data-exists="cpu" ...>
<button type="button" data-exists="motherboard" ...>
<button type="button" data-exists="graphic-card" ...>
如果您确实想检查该属性的存在,则应使用
if (currentButton[0].dataset.cpu) {...}
if (currentButton[0].dataset.motherboard) {...}
if (currentButton[0].dataset.graphicCard) {...}
或者如果您必须使用jQuery( 浏览器不支持数据集 ),请使用.is
方法
if (currentButton.is('[data-cpu]')) {...}
// etc
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.