Javascript 使用jquery打开具有不同数据属性的按钮

我有一个有3个按钮的表，我使用的是

jquery-“3.2.1”

我正在尝试使用下面的javascript文件

Builder

在稍后的if语句中加载适当的数据

我的

预期输出是：

如果按f.ex.：添加CPU按钮，则应显示警报消息
console.log（“CPU单击”）

在下面，您可以找到我的最低可行示例：


类生成器{
构造函数（）{
此为.events（）；
}//结束构造函数
事件（）{
$（“.btn btn primary btn sm”）。在（“单击”，this.ourClickDispatcher.bind（this））；
}
//方法
我们的ClickDispatcher（e）{
var currentButton=$（e.target）.closest（“.btn btn primary btn sm”）；
控制台日志（“测试”）
如果（currentButton.data（'exists'）=='cpu'）{
日志（“cpu点击”）
}
如果（currentButton.data（'exists'）=='motherboard'）{
日志（“单击主板”）
}
如果（currentButton.data（'exists'）=='graphic card'）{
console.log（“单击图形卡”）
}
}
}
导出默认生成器

中央处理器
添加CPU
主板
添加主板
图形卡
添加图形卡
如果使用
$（“.btn btn primary btn sm”）
您希望将所有这些类作为元素的目标，则需要使用

$(".btn.btn-primary.btn-sm")

（每个类都没有空格和
，这是正确的css语法）

其次，您的数据属性（根据脚本）都应该使用不同的值命名为
data exists
，而不是为每个属性命名不同的属性

所以

或者，如果必须使用jQuery（不支持数据集的浏览器），请使用
.is
方法

if (currentButton.is('[data-cpu]')) {...}
// etc

if (currentButton[0].dataset.cpu) {...}
if (currentButton[0].dataset.motherboard) {...}
if (currentButton[0].dataset.graphicCard) {...}

if (currentButton.is('[data-cpu]')) {...}
// etc