使用 javascript 以 css 定位父級
[英]Using javascript to target a parent with css
問題描述
我仍然很新並且正在學習，但我正在努力完成一個個人項目，所以我在這里尋找一個優雅的解決方案。 把這個項目想象成一個“待辦事項”列表。 我有多個帶有復選框的列表，當復選框為:checked時，我需要它來更改父li容器的background-color 。
而且，在頁面頂部，我有一個復選框來隱藏所有已完成的任務，它是帶有已完成 ( :checked ) 子項的li容器。 根據我的閱讀，這不可能完全使用 CSS 因為您不能 select 樣式的父級。 然而，我對 JavaScript 的了解太有限，無法理解如何自己制定解決方案或重新利用我在這里看到的許多類似問題的解決方案。 我找不到可以傳遞樣式來display: none; 作為切換。
為簡單起見，我正在尋找一個純 JS（無 jQuery）解決方案。
“隱藏已完成的任務”復選框應打開或關閉所有已完成的任務， display: none / display: flow; ，單個任務復選框應該只更改父li背景顏色。
/*this rule hides all task. I want to only hide the task which are:checked*/ #hide-toggle1:checked~*.task1 { display: none; } /*this css rule hides only the checked input. I need it to hide the whole <li>*/ #hide-toggle2:checked~*.task2>input:checked { display: none; }
<body> <input type="checkbox" id="hide-toggle1"> <label for="hide-toggle1">Hide completed tasks</label> <ul> <li class="task1"> <input type="checkbox" id="1-1" value="0"> <label for="1-1">Task 1</label> </li> <li class="task1"> <input type="checkbox" id="1-2" value="0"> <label for="1-2">Task 2</label> </li> <li class="task1"> <input type="checkbox" id="1-3" value="0"> <label for="1-3">Task 3</label> </li> </ul> <input type="checkbox" id="hide-toggle2"> <label for="hide-toggle2">Hide completed tasks</label> <ul> <li class="task2"> <input type="checkbox" id="2-1" value="0"> <label for="2-1">Task 1</label> </li> <li class="task2"> <input type="checkbox" id="2-2" value="0"> <label for="2-2">Task 2</label> </li> <li class="task2"> <input type="checkbox" id="2-3" value="0"> <label for="2-3">Task 3</label> </li> </ul> </body>
2 個解決方案
解決方案1
0 2021-03-12 19:42:58
我強烈推薦學習一些javascript ，它會讓你的生活更輕松。 我以最基本的形式編寫了這段代碼，試圖幫助你更好地理解它。 我也試圖評論我在做什么。 我為列表中的每個輸入添加了一個'check-input' class，並為隱藏按鈕添加了一個'hide-list' class。
// Add an event to each 'input' tag function AddEventListeners() { // get all items marked with a class 'check-input' let inputs = document.getElementsByClassName('check-input'); // whatever background color you want the 'li' to turn once checked let desiredBackgroundColor = "green"; // loop through all input elements for (let i = 0; i < inputs.length; i++) { // add the event listener for a 'click' inputs[i].addEventListener('click', function() { // get the parent element which would be the 'li' let li_parent = this.parentElement; // set its background color to transparent if it has already been clicked if (li_parent.style.backgroundColor == desiredBackgroundColor) { li_parent.style.backgroundColor = "transparent"; } else { if (this.checked == true) { li_parent.style.backgroundColor = desiredBackgroundColor; } else { li_parent.style.backgroundColor = "transparent"; } } }); } // get all buttons marked by a class 'hide-list' let hideButtons = document.getElementsByClassName('hide-list'); // add a pressed state variable to see when the button has been pressed let pressed = false; // loop through all hide buttons for (let i = 0; i < hideButtons.length; i++) { // add the event listener hideButtons[i].addEventListener('click', function() { // get the 'li' marked with 'task' and their number, either 1 or 2 let children_li = document.getElementsByClassName('task' + (i + 1)); // check if the button has already been pressed if (pressed == true) { for (let j = 0; j < children_li.length; j++) { // if it has, make the elements visible again children_li[j].style.display = "block"; } pressed = false; return; } pressed = true; for (let j = 0; j < children_li.length; j++) { // if the elements have been marked by the background color, make them invisible if (children_li[j].style.backgroundColor == desiredBackgroundColor) { children_li[j].style.display = "none"; } else { children_li[j].style.display = "block"; } } }); } }
<body onload="AddEventListeners();"> <input type="checkbox" id="hide-toggle1" class="hide-list"> <label for="hide-toggle1">Hide completed tasks</label> <ul> <li class="task1"> <input type="checkbox" id="1-1" value="0" class="check-input"> <label for="1-1">Task 1</label> </li> <li class="task1"> <input type="checkbox" id="1-2" value="0" class="check-input"> <label for="1-2">Task 2</label> </li> <li class="task1"> <input type="checkbox" id="1-3" value="0" class="check-input"> <label for="1-3">Task 3</label> </li> </ul> <input type="checkbox" id="hide-toggle2" class="hide-list"> <label for="hide-toggle2">Hide completed tasks</label> <ul> <li class="task2"> <input type="checkbox" id="2-1" value="0" class="check-input"> <label for="2-1">Task 1</label> </li> <li class="task2"> <input type="checkbox" id="2-2" value="0" class="check-input"> <label for="2-2">Task 2</label> </li> <li class="task2"> <input type="checkbox" id="2-3" value="0" class="check-input"> <label for="2-3">Task 3</label> </li> </ul> </body>
對於一些好的和免費的 JS 教程，我會推薦
https://www.sololearn.com/learning
和/或
解決方案2
0 2021-03-12 20:04:44
我建議使用通用類：對於隱藏復選框： hideall el和對於您的列表項： task el這樣您可以使用 class el將事件addEventListener添加到所有復選框。
從那里你檢查點擊的項目是否有 class hideall或task 。
如果它的task和它的checked添加綠色到它的父li元素。
如果它hideall ，請抓住所有下一個ul's選中li's並隱藏...
document.querySelectorAll(".el").forEach(el => { el.addEventListener("click", function(event) { if (event.target.classList.contains('task') && event.target.checked) { event.target.parentElement.style.backgroundColor = "green";} else { event.target.parentElement.style.backgroundColor = ""} if (event.target.classList.contains('hideall')) { let e = event.target.nextElementSibling.nextElementSibling.querySelectorAll(".task:checked"); event.target.checked? e.forEach(li => {li.parentElement.style.display = "none" }): e.forEach(li => {li.parentElement.style.display = "flow"; li.parentElement.classList.add("dot")}) } }); })
/*this will bring missing dot afte show hide back*/.dot::before { color: black; content: "• "; margin-left: -13px; padding-right:4px; }
<body> <input type="checkbox" id="hide-toggle1" class="hideall el"> <label for="hide-toggle1">Hide completed tasks</label> <ul> <li class="task1"> <input type="checkbox" id="1-1" value="0" class="task el"> <label for="1-1">Task 1</label> </li> <li class="task1"> <input type="checkbox" id="1-2" value="0" class="task el"> <label for="1-2">Task 2</label> </li> <li class="task1"> <input type="checkbox" id="1-3" value="0" class="task el"> <label for="1-3">Task 3</label> </li> </ul> <input type="checkbox" id="hide-toggle2" class="hideall el"> <label for="hide-toggle2">Hide completed tasks</label> <ul> <li class="task2"> <input type="checkbox" id="2-1" value="0" class="task el"> <label for="2-1">Task 1</label> </li> <li class="task2"> <input type="checkbox" id="2-2" value="0" class="task el"> <label for="2-2">Task 2</label> </li> <li class="task2"> <input type="checkbox" id="2-3" value="0" class="task el"> <label for="2-3">Task 3</label> </li> </ul> </body>
CSS Grid：如何使用 CSS 或 JavaScript 定位 CSS Grid 單元格
[英]CSS Grid: how to target CSS Grid cell using CSS or JavaScript
如何使用全局CSS或javascript來定位和更改元素樣式？
[英]How to target and change element style using global CSS or javascript?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.