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

Question

＆＃13;

＆＃13;

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";*/
  }
}

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

在上面我试图隐藏菜单标题时单击与之关联的按钮。我试图通过更改类名来实现这一点。但它没有在功能上工作，它＆＃ 39; s只是隐藏奇数位置的菜单标题，并且连续点击它隐藏所有。我不知道为什么，我想解决这个问题，我该如何解决这个问题？

  

我的主要要求是更改元素的类名   存储在数组中。然后才隐藏菜单标题。

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>

Answer 2

＆＃13;

＆＃13;

function hideTitle() {
        var k = document.getElementsByClassName('menu-title');
        for (var i = 0;i < k.length  ; i++) {           
           addClass(k[i],'menu-title-after-click');
        }
}

function addClass(el, cls) {
  if (hasClass(el,cls)) {
            var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
            el.className=el.className.replace(reg,' ');
  } 
  else 
  {
     if (el.classList)
       el.classList.add(cls)
     }
}

function hasClass(el,cls) {
    return el.className.match(new    RegExp('(\\s|^)'+cls+'(\\s|$)'));
}

＆＃13;

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;
}

＆＃13;

<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  class="menu-title">title1</span>
  </li>
   <li>
    <span class="fa fa-glass"></span>
    <span  class="menu-title">title2</span>
  </li>
   <li>
    <span class="fa fa-glass"></span>
    <span  class="menu-title">title3</span>
  </li>
<ul>
  <button type="button" onclick="hideTitle();">hide/show title</button>

＆＃13;

＆＃13;

＆＃13;