我正在學習從 w3schools 撰寫一個簡單的待辦事項串列，當單擊串列項時，我對添加選中的符號感到震驚。請解釋以下代碼的作業原理。
var list = document.querySelector('ul');
list.addEventListener('click', function(ev) {
if (ev.target.tagName === 'LI') {
ev.target.classList.toggle('checked');
}
}, false);/* When clicked on, add a background color and strike out text */
ul li.checked {
background: #888;
color: #fff;
text-decoration: line-through;
}
/* Add a "checked" mark when clicked on */
ul li.checked::before {
content: '';
position: absolute;
border-color: #fff;
border-style: solid;
border-width: 0 3px 3px 0;
top: 10px;
left: 16px;
transform: rotate(45deg);
height: 15px;
width: 7px;
}<div id="myDIV" class="header">
<h2 style="margin:5px">My To Do List</h2>
<input type="text" id="myInput" placeholder="Title...">
<span onclick="newElement()" class="addBtn">Add</span>
</div>
<ul id="myUL">
<li>Hit the gym</li>
<li class="checked">Pay bills</li>
<li>Meet George</li>
<li>Buy eggs</li>
<li>Read a book</li>
<li>Organize office</li>
</ul>特別是我無法理解在“IF”中檢查什么條件以及下面的“false”是什么意思。
uj5u.com熱心網友回復：
首先，您的代碼通過其標簽名稱從ul元素型別的檔案中獲取一個元素，然后添加單擊事件偵聽器以在用戶單擊該元素或其子元素時進行偵聽。
現在，當用戶單擊元素的任何子元素甚至ul元素時，傳遞給事件偵聽器的函式將被觸發，該函式具有保存事件詳細資訊的引數，在這些詳細資訊之間有標識單擊元素的目標屬性。
要檢查被點擊元素的標簽名稱，我們有target的tagName屬性，它告訴我們元素的標簽名稱。一旦元素的標簽名稱是LI參考
<li>element</li>
然后，它執行之間的代碼，如果塊，其由肘節的（添加或洗掉）的類名目標，通過使用被稱為另一個屬性班級串列，其可用于除去，并添加類例如元件
<div id="my" class="nothing">Hello!</div>
const div = document.getElementById("my");
div.classList.toggle("checked"); // result is: <div id="my" >Hello!</div>
div.classList.toggle("checked"); // result is: <div id="my" >Hello!</div>
有關更多資訊，您可以查看此
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/346440.html
標籤：javascript 目标 检查 标签名称