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

Question

我有一个带有 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- 属性中进行区分以加载正确的输出。

如果单击任何按钮，以下脚本不会给我预期输出，有什么建议吗？

感谢您的回复!

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(浏览器不支持数据集)，请使用 .is 方法

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