單擊列表項時如何添加活動/非活動 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>