我有一个带有 3 个按钮的表格,并且我正在使用 jquery-"3.2.1"
。
我尝试使用下面的 javascript 文件 Builder
稍后在 if 语句中加载正确的数据。
我的预期输出
是:
如果按 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-
属性中进行区分以加载正确的输出。
如果单击任何按钮,以下脚本不会给我预期输出
,有什么建议吗?
感谢您的回复!
最佳答案
如果使用 $(".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
关于javascript - 使用 jquery 打开具有不同数据属性的按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49835464/