Question

我正在使用Sweet Alert 2，当同一个类中有多个元素时，它似乎无法按类定位。

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

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

js我有.delete-course的目标：

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>

它适用于但不适用或

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

Answer 1

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

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

来源：   MDN

而是将querySelectorAll与forEach结合使用 - 请参阅下面的演示：

＆＃13;

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

＆＃13;

<!-- 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>

＆＃13;

Answer 2

带有querySelectorAll的

for loop非常昂贵，因为它会为数组中的每个元素创建一个新的事件处理程序。

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

＆＃13;

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'
)
  }
});

＆＃13;

<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>

＆＃13;

Answer 3

检查此代码段是否所有标签都在调用甜蜜警报

$(".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>

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

3 个答案: