javascript - 使用循环检查并从类名字符串中删除一个类名，并将另一个类名添加到触发事件的元素

Question

这很简单。

我想做一个current类并将其放在当前事件的链接上

像这样:<li class="li current"><a>Link1</a></li>

但在此之前，JS 应该使用 class="li" 获取所有元素, 遍历它并删除 class=" current"如果有的话。

循环结束后，再添加class=" current"触发事件的元素。

例如，如果用户点击 link3，那么 JS 应该删除 class=" current"在 link1 上，然后添加 class=" current"在 link3

它看起来像这样:<li class="li current"><a>link3</a></li>

看来我不能使用getElementsByClassName()对于事件监听器。那我应该怎么做才能成为事件监听器呢？

HTML

document.addEventListener("DOMContentLoaded",function(){
	var et = document.getElementsByClassName("li");
	for(i=0; i <et.length; i++){
			et[i].addEventListener("click",function(){
			 funclink(event);
			});
  };
});

function funclink(event){
	//first get all element with class "li" and remove class " current"
	//then add class " current" to the element which triggers the event
	var slink = document.getElementsByClassName("li");
	for(i =0; i < slink.length; i++){
		slink[i].className = slink[i].className.replace(" current","");
	}
	event.currentTarget.className += " current";
}

.current {
color : orange;
}

<ul id="navmenu">
	<li class="li current"><a href="#">Home</a></li>
	<li class="li"><a href="#">Call Service</a>
		<li class="li"><a class="a-left" href="#">Rental</a></li>
		<li class="li"><a class="a-left" href="#">Sales</a></li>
		
	</li>
 </ul>

Answer 1

如前所述，您必须遍历元素才能添加 eventListener。 document.getElementsByClassName 将返回一个 NodeList。

此外，如果您只使用事件参数调用您的函数，您可以只传递函数引用。

此外，再次获取所有 li，只获取那些具有 current 类的 li。这将减少迭代次数。

您应该使用 classList 而不是 className。它有许多有用的方法，例如 add、remove 和 toggle。

---

编辑 1

由于您需要在刷新后保留所选的 li，因此您将不得不使用客户端存储或查询参数来告知您的 JS 有关所选元素的信息。

出于安全原因，SO 不提供对localStorage 的访问，因此您必须复制代码并在本地文件上进行调试。

document.addEventListener("DOMContentLoaded", function() {
  var lis = document.getElementsByClassName("li")
  for (var i = 0; i < lis.length; i++) {
    lis[i].addEventListener("click", funclink.bind(lis[i], i));
  }
  
  initializeUI();
});

function funclink(index, event) {
  var lis = document.querySelectorAll('.li.current');
  for(var i = 0; i< lis.length; i++){
    lis[i].classList.remove('current');
  }
  this.classList.add('current');
  setIndex(index)
}

function initializeUI(){
  var lis = document.querySelectorAll('.li');
  var index = parseInt(locatStorage.getItem('liIndex'));
  lis[index || 0].classList.add("current");
}

function setIndex(index){
  localStorage.setItem("liIndex", index);
}

function blockAnchors(){
  var as = document.querySelectorAll('a');
  for(var i = 0; i< as.length; i++){
    as[i].onclick = function(){ 
      return false 
    }
  }
}
blockAnchors();

.current{
  background: #ddd;
}

<ul id="navmenu">
  <li class="li"><a href="?module=home">Home</a></li>
  <li class="li"><a href="?module=service">Call Service</a>
    <li class="li"><a class="a-left" href="?module=rental">Rental</a></li>
    <li class="li"><a class="a-left" href="?module=sales">Sales</a></li>

  </li>
</ul>

注意:我已经添加了一个 blockAnchors 以在 a 的点击时停止导航。这只是为了演示。