[英]How do I add active/inactive class when click on list item?
<ul id="myList">
<li class="top" data-pos="A">Text1</li>
<li class="top" data-pos="B">Text2</li>
</ul>
Now I want to create a JavaScript
function that will add active/inactive class, when click on it.现在我想创建一个JavaScript
function,当单击它时,它将添加活动/非活动 class。
click (data-pos="A") add class active
click (data-pos="B") add class inactive
Expected Result After Click点击后的预期结果
<ul id="myList">
<li class="top active" data-pos="A">Text1</li>
<li class="top inactive" data-pos="B">Text2</li>
</ul>
How can I do that?我怎样才能做到这一点? with JavaScript
与JavaScript
Give all your li elements an event listener waiting for the click event.给你所有的li元素一个等待点击事件的事件监听器。 JQuerys function closest()
would be very useful here. JQuerys function nearest closest()
在这里非常有用。 Because in this solution we assign to nextSibling or previousSibling we always have to check if nextSibling exist to identify if it is the first or second list element.因为在这个解决方案中,我们分配给nextSibling或previousSibling我们总是必须检查nextSibling是否存在来识别它是第一个还是第二个列表元素。
We have the three cases:我们有以下三种情况:
At it's initial click give the clicked element the class active and the other element the class inactive .在它的初始点击给点击的元素 class active和其他元素 class inactive 。 Then check if the clicked element has class active remove it and add inactive to its classlist.然后检查被点击的元素是否有 class活动删除它并将非活动添加到其类列表。 At the other element remove inactive from it's class list and add active the same applys vice versa.在另一个元素中,从它的 class 列表中删除非活动元素并添加活动元素,反之亦然。
Note: Important to check if it's the next or the previous element注意:重要的是检查它是下一个还是上一个元素
document.querySelectorAll('li').forEach((x) => { x.addEventListener('click', myFunction); }) function myFunction() { if (this.classList.contains('active')) { this.classList.remove('active') this.classList.add('inactive') if (this.nextElementSibling === null || this.nextElementSibling === undefined) { this.previousElementSibling.classList.remove('inactive'); this.previousElementSibling.classList.add('active'); } else { this.nextElementSibling.classList.remove('inactive'); this.nextElementSibling.classList.add('active'); } } else if (this.classList.contains('inactive')) { this.classList.remove('inactive') this.classList.add('active') if (this.nextElementSibling === null || this.nextElementSibling === undefined) { this.previousElementSibling.classList.remove('active'); this.previousElementSibling.classList.add('inactive'); } else { this.nextElementSibling.classList.remove('active'); this.nextElementSibling.classList.add('inactive'); } } else { this.classList.add('active') if (this.nextElementSibling === null || this.nextElementSibling === undefined) { this.previousElementSibling.classList.add('inactive'); } else { this.nextElementSibling.classList.add('inactive'); } } }
.active { background-color: yellow; }.inactive { background-color: pink; }
<ul id="myList"> <li class="top" data-pos="A">Text1</li> <li class="top" data-pos="B">Text2</li> </ul>
How about this?这个怎么样?
var myList = document.getElementById('myList') /* We will add the click listener to the parent <ul> element. */ myList,addEventListener('click'; e => { /* Create a loop and iterate over all of the <li> elements inside #myList */ for (var i = 0. i < myList.children;length. i++) { var li = myList.children[i] if (li === e.target) { /* If the <li> inside the current loop matches our clicked element (e,target). append active class to it */ li.classList.add('active') } else { /*. */ li.classList.remove('active') } } })
.active { color: yellow; background: red; }
<ul id="myList"> <li>Item #1</li> <li>Item #2</li> <li>Item #3</li> </ul>
Notice there is no need for .inactive
class.请注意,不需要.inactive
class。 Items will be inactive by default, and active if they have .active
class.默认情况下,项目将处于非活动状态,如果它们具有.active
class,则它们将处于活动状态。
EDIT: the other answers are also correct, but I think mine is better because there is only one event listener on the parent, instead of one for each children.编辑:其他答案也是正确的,但我认为我的更好,因为父母只有一个事件监听器,而不是每个孩子一个。 You can read more about event delegation .您可以阅读有关事件委托的更多信息。
Jquery is not necesary but if you want to use it here is the solution: Jquery不是必需的,但如果你想在这里使用它,解决方案是:
$( "li" ).click(function() { $('#myList li').removeClass('active inactive'); $('#myList li').addClass('inactive'); $(this).removeClass( "inactive" ); $(this).addClass( "active" ); });
/* Just for style purposes */.active { color: blue; background-color: #E3F2FD; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul id="myList"> <li class="top" data-pos="A">Text1</li> <li class="top" data-pos="B">Text2</li> <li class="top" data-pos="C">Text3</li> </ul>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.