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

Posted 2023-03-05

【中文标题】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>

它适用于<!-- 1 -->，但不适用于<!-- 2 --> 或<!-- 3 -->

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

【参考方案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>