如何使用 javascript 訪問我的父 li 元素？

Question

我是 JavaScript 的初學者，我不知道如何獲取選中復選框的 li 的索引並添加/刪除 CSS class 切到那個特定的li。 我嘗試了父方法，但這不起作用，也許我沒有以適當的方式做！

例如，我故意將 CSS cut class 添加到最后一個 li 但我想在選中復選框時將此 class 添加到 li 。

 function myfunction() { }

 .cut { text-decoration: line-through; opacity: 0.4; } #mylist { list-style: none; }

 <div class="container"> <ul id="mylist"> <li class="mycheck"> <input type="checkbox" class="status" onclick="myfunction()"> <label class="mytodo">make tea</label> </li> <li class="mycheck"> <input type="checkbox" class="status" onclick="myfunction()"> <label class="mytodo">notes making</label> </li> <li class="mycheck cut"> <input type="checkbox" class="status" checked onclick="myfunction()"> <label class="mytodo">set clothes</label> </li> </ul> </div>

Answer 1

您可以this關鍵字傳遞給 function 以便您可以識別單擊復選框的最接近的li元素：

 function myfunction(el){ if(el.checked){ el.closest('li').classList.add('cut'); } else{ el.closest('li').classList.remove('cut'); } }

 .cut{ text-decoration: line-through; opacity: 0.4; } #mylist{list-style: none;}

 <div class="container"> <ul id="mylist"> <li class="mycheck"> <input type="checkbox" class="status" onclick="myfunction(this)" > <label class="mytodo">make tea</label> </li> <li class="mycheck"> <input type="checkbox" class="status" onclick="myfunction(this)"> <label class="mytodo">notes making</label> </li> <li class="mycheck"> <input type="checkbox" class="status" onclick="myfunction(this)"> <label class="mytodo">set clothes</label> </li> </ul> </div>

使用 JavaScript 附加事件：

 var checkboxes = document.querySelectorAll('.mycheck.status'); checkboxes.forEach(function(chk){ chk.addEventListener('click', function(){ myfunction(this); }); }) function myfunction(el){ if(el.checked){ el.closest('li').classList.add('cut'); } else{ el.closest('li').classList.remove('cut'); } }

 .cut{ text-decoration: line-through; opacity: 0.4; } #mylist{list-style: none;}

 <div class="container"> <ul id="mylist"> <li class="mycheck"> <input type="checkbox" class="status" > <label class="mytodo">make tea</label> </li> <li class="mycheck"> <input type="checkbox" class="status"> <label class="mytodo">notes making</label> </li> <li class="mycheck"> <input type="checkbox" class="status"> <label class="mytodo">set clothes</label> </li> </ul> </div>