javascript - 如何更改存储在数组中的变量的类名？

Question

function hideTitle(){
  var k = document.getElementsByClassName('menu-title');
  for (var i = 0;i < k.length ; i++) {
    k[i].className = "menu-title-after-click" ;
    /*document.getElementById("menu-title").className="menu-title-after-click";*/
  }
}

ul {
  list-style:none;
}
.menu-title{
  /*padding-left: 2px;*/
  padding-left: 3px;
  opacity: 1;
  color: red;
  visibility: visible;
  /*display: none;*/
}

.menu-title-after-click{
  /*display: none;*/
  visibility: hidden;
  opacity: 0;
  color: green;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<ul>
  <li>
    <span class="fa fa-glass"></span>
    <span id="menu-title" class="menu-title">title1</span>
  </li>
  <li>
    <span class="fa fa-glass"></span>
    <span id="menu-title" class="menu-title">title2</span>
  </li>
  <li>
    <span class="fa fa-glass"></span>
    <span id="menu-title" class="menu-title">title3</span>
  </li>
</ul>
<button type="button" onclick="hideTitle();">hide/show title</button>

在上面我试图在单击与其关联的按钮时隐藏菜单标题。我试图通过更改类名来做到这一点。但它在功能上不起作用，它只是隐藏菜单标题奇怪的位置和连续点击它隐藏所有。我不知道为什么，我想解决这个问题，我该如何解决？

my primary requirement is to change the class names of elements stored in an array.then only to hide the menu-title.

Answer 1

我一直在使用 classList，它更容易理解并且有效。检查这个

您还可以轻松地使用删除和添加来处理类。

已编辑:现在它不会给出 console.log 错误并切换所有类

function hideTitle(){
    var k = document.getElementsByClassName('menu-title');
    for (var i = 0;i < k.length ; i++) {
        if (k[i].classList.contains("menu-title-after-click")) {
            k[i].classList.remove("menu-title-after-click");
        } else {
            k[i].classList.add("menu-title-after-click");
        }
    }
}

ul {
  list-style:none;
  }
.menu-title{
    /*padding-left: 2px;*/
    padding-left: 3px;
    opacity: 1;
    color: red;
    visibility: visible;
    /*display: none;*/
}

.menu-title-after-click{
    visibility: hidden;
    opacity: 0;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<ul>
  <li>
    <span class="fa fa-glass"></span>
    <span id="menu-title" class="menu-title">title1</span>
  </li>
   <li>
    <span class="fa fa-glass"></span>
    <span id="menu-title" class="menu-title">title2</span>
  </li>
   <li>
    <span class="fa fa-glass"></span>
    <span id="menu-title" class="menu-title">title3</span>
  </li>
<ul>
  <button type="button" onclick="hideTitle()">hide/show title</button>