当使用 javascript 同时单击下一个按钮或上一个按钮时，激活下一个 li 或前一个 li 元素

Question

when I click on the next or previous buttons the list items need to active at the same time. if I click on next button the next list item needs to active (means color or background color) by using Javascript or typescript in angualr6. thanks in advance.

• item 1
• item 2
• item 3
• item 4

Previous Next

 var list=document.getElementById("list").childElementCount; var count = 0; function activeclass(index){ parent = document.getElementById("list"); count += index; chailditem = parent.children[count]; chailditem.style.color = 'red'; if(count == list){ count == 0 } }

 .active{ color:red; font-size:16px; }

 <ul id="list"> <li class="item active">item 1<li> <li class="item">item 2<li> <li class="item">item 3<li> <li class="item">item 4<li> <ul> <button class="btn btn-default button-next" on-click="activeclass(-1)" type="button">Next</button> <button class="btn btn-default button-prev" on-click="activeclass(1)" type="button">Previous</button>

Answer 1

First of all it's not the decent solution, however you get an idea from here.

 var count = 0; function activeclass(val){ var totalElem=document.getElementsByClassName("item"); if(count > totalElem.length || count < 0) return; var list=document.getElementsByClassName("active"); let elem; if(val == 'next') { elem = list[0].nextElementSibling; count++; } else { elem = list[0].previousElementSibling; count--; } list[0].classList.remove("active"); elem.classList.add('active'); }

 .active{ color:red; font-size:16px; }

 <ul id="list"> <li class="item active">item 1</li> <li class="item">item 2</li> <li class="item">item 3</li> <li class="item">item 4</li> <ul> <button class="btn btn-default button-next" onclick="activeclass('next')" type="button">Next</button> <button class="btn btn-default button-prev" onclick="activeclass('prev')" type="button">Previo

Please don't hesitate to let me know if you have any query.