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

Question

我有一张有三个按钮的桌子--我用的是jquery-"3.2.1"。

我正在尝试使用下面的javascript-file 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呢？

谢谢你的回复！

Answer 1

如果使用$(".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 (不支持dataset的浏览器)，则使用.is方法

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