White Maskers White Maskers - 1 month ago 5
CSS Question

How to change class names of variables stored in an array?



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>





In the above i'm tried to hide the menu-title when click on the button associated with it.i trying to do that by changing the class name.but it's not working functionally,it's just hide the menu-titles on odd positions and on continuous clicks it hides all. i don't know why,i want to fix this,how can i fix this?


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

Answer

I am always using classList is more easy to understand and is working. Check this

Also you can easily handle classes with remove and add.

Edited: Now its not giving console.log errors and its toggling all the classes

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>

Comments