Sweet Alert 2 - 为什么我不能按班级定位？答案

【问题标题】：Sweet Alert 2 - why can't I target by class?Sweet Alert 2 - 为什么我不能按班级定位？
【发布时间】：2017-07-15 02:42:04
【问题描述】：

我正在使用 Sweet Alert 2，当同一类的元素超过 1 个时，我似乎无法按类定位。

例如，我有一个表格，它输出记录列表和每个记录旁边的“删除”按钮，例如

 <a class="delete-course" href="#">Delete Course</a>

我以.delete-course为目标的js：

document.querySelector('.delete-course').addEventListener('click', function(e) {
    console.log('delete course pressed');

    // ...
});

如果只有 1 个“删除课程”按钮，所有代码都可以正常工作。但是如果我有多个按钮，它只会在单击第一个按钮时触发。例如：

<!-- 1 --> <a class="delete-course" href="#">Delete Course</a>
<!-- 2 --> <a class="delete-course" href="#">Delete Course</a>
<!-- 3 --> <a class="delete-course" href="#">Delete Course</a>

它适用于，但不适用于 或

这是为什么？我假设因为我是按类定位的，所以当单击该类的任何元素时它会触发？

【问题讨论】：

标签： javascript jquery html arrays dom

【解决方案1】：

querySelector 返回符合条件的第一个元素：

返回文档中与指定选择器组匹配的第一个元素 (...)。

来源： MDN

改为使用 querySelectorAll 与 forEach 结合使用 - 请参阅下面的演示：

[].forEach.call(document.querySelectorAll('.delete-course'), function(e) {
  e.addEventListener('click', function(e) {
    console.log('delete course pressed');
  });
});

<!-- 1 --><a class="delete-course" href="#">Delete Course</a>
<!-- 2 --><a class="delete-course" href="#">Delete Course</a>
<!-- 3 --><a class="delete-course" href="#">Delete Course</a>

【讨论】：

【解决方案2】：

querySelectorAll 和 for loop 的开销很大，因为它会为数组中的每个元素创建一个新的事件处理程序。

相反，创建一个附加到正文的事件处理程序具有已定义类的元素。

document.body.addEventListener("click", function (event) {
  if (event.target.classList.contains("delete-course")) {
    var title = event.target.innerHTML;

    //if (!confirm("Sure to " + title)) {
      //event.preventDefault();
    //}
swal(
  'All right',
  'Deleted! '+title,
  'success'
)
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<link rel="stylesheet" type="text/css" href="http://tristanedwards.me/u/SweetAlert/lib/sweet-alert.css"/>
<script src="http://tristanedwards.me/u/SweetAlert/lib/sweet-alert.js"></script>
<a class="delete-course" href="#">Delete Course1</a>

<a class="delete-course" href="#">Delete Course2</a>

【讨论】：

【解决方案3】：

检查这个 sn-p 所有标签都在调用甜蜜警报

$(".delete-course").click(function() {
    sweetAlert(
        "Deleted...", "Successfully!", "success"
    );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<link rel="stylesheet" type="text/css" href="http://tristanedwards.me/u/SweetAlert/lib/sweet-alert.css"/>
<script src="http://tristanedwards.me/u/SweetAlert/lib/sweet-alert.js"></script>
<!-- 1 --><a class="delete-course" href="#">Delete Course</a>
<!-- 2 --><a class="delete-course" href="#">Delete Course</a>
<!-- 3 --><a class="delete-course" href="#">Delete Course</a>

【讨论】：