Sweet Alert 2 - 爲什麼我不能按課堂上的目標？

我正在使用Sweet Alert 2，並且當同一個類的元素超過1個時，它看起來不能按類進行定位。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>

它將工作的但不或

這是爲什麼？我認爲，因爲我是按班級定位的，當點擊該類的任何元素時，它會觸發？

來源

2017-02-24 Andy

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>

來源

2017-02-24 10:08:55 kukkuz

檢查該段所有的標籤都呼籲甜警報

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

來源

2017-02-24 10:15:11

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>

來源

2017-02-24 10:20:02

Sweet Alert 2 - 爲什麼我不能按課堂上的目標？

回答

相關問題