单击列表项时如何添加活动/非活动 class？

Question

<ul id="myList">
  <li class="top" data-pos="A">Text1</li>
  <li class="top" data-pos="B">Text2</li>
</ul>

现在我想创建一个JavaScript function，当单击它时，它将添加活动/非活动 class。

click (data-pos="A") add class active
click (data-pos="B") add class inactive

点击后的预期结果

<ul id="myList">
   <li class="top active"   data-pos="A">Text1</li>
   <li class="top inactive" data-pos="B">Text2</li>
</ul>

我怎样才能做到这一点？ 与JavaScript

Answer 1

纯JavaScript解决方案

给你所有的li元素一个等待点击事件的事件监听器。 JQuerys function nearest closest()在这里非常有用。 因为在这个解决方案中，我们分配给nextSibling或previousSibling我们总是必须检查nextSibling是否存在来识别它是第一个还是第二个列表元素。

我们有以下三种情况：

1. 初始无活动或非活动 class其他部分在 function
2. 我们点击的元素有 class 活动
3. 我们点击的元素有 class 无效

在它的初始点击给点击的元素 class active和其他元素 class inactive 。 然后检查被点击的元素是否有 class活动删除它并将非活动添加到其类列表。 在另一个元素中，从它的 class 列表中删除非活动元素并添加活动元素，反之亦然。
注意：重要的是检查它是下一个还是上一个元素

 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>

Answer 2

这个怎么样？

 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>

请注意，不需要.inactive class。 默认情况下，项目将处于非活动状态，如果它们具有.active class，则它们将处于活动状态。

编辑：其他答案也是正确的，但我认为我的更好，因为父母只有一个事件监听器，而不是每个孩子一个。 您可以阅读有关事件委托的更多信息。

Answer 3

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>