Javascript正在添加活动类，但单击其他​​按钮时不会将其删除

Question

 function grid_view() { grid_view_result(); grid_view_button(); } function grid_view_active() { if (document.getElementById("grid_view").className == "fa fa-th-large ml-5") { document.getElementById("grid_view").className = "fa fa-th-large ml-5 active"; } } function grid_view_inactive() { if (document.getElementById("grid_view").className == "fa fa-th-large ml-5 active") { document.getElementById("grid_view").className = "fa fa-th-large ml-5"; } } function grid_view_button() { if (document.getElementById("cooking_result").className == "recipes grid") { grid_view_active(); return; } if (document.getElementById("cooking_result").className = "recipes list") { grid_view_inactive(); return; } } function grid_view_result() { if (document.getElementById("cooking_result").className == "recipes list") { document.getElementById("cooking_result").className = "recipes grid"; } } function list_view() { list_view_result(); list_view_button(); } function list_view_active() { if (document.getElementById("list_view").className == "fa fa-th-list ml-5") { document.getElementById("list_view").className = "fa fa-th-list ml-5 active"; } } function list_view_inactive() { if (document.getElementById("list_view").className == "fa fa-th-list ml-5 active") { document.getElementById("list_view").className = "fa fa-th-list ml-5"; } } function list_view_button() { if (document.getElementById("cooking_result").className == "recipes list") { list_view_active(); return; } if (document.getElementById("cooking_result").className = "recipes grid") { list_view_inactive(); return; } } function list_view_result() { if (document.getElementById("cooking_result").className == "recipes grid") { document.getElementById("cooking_result").className = "recipes list"; } } 

 .active{text-decoration:underline;} .recipes.grid li{float:left;width:50%;height:50px;background:red;} .recipes li:nth-child(2){background:blue !important;} .recipes.list li{float:left;width:100%;height:50px;background:red;} 

 <i id="grid_view" onclick="grid_view();" class="fa fa-th-large ml-5">Grid</i> <i id="list_view" onclick="list_view();" class="fa fa-th-list ml-5">List</i> <ul id="cooking_result" class="recipes grid"> <li></li> <li></li> </ul> 

I can add class="active" to i tag but I can't remove when I click to other i tag. May you help me to fix it? Also, If possible, may you simplify to javascript? I think it's too long for this functionality :)

Answer 1

Here is a tidied up solution.

The main changes I've made:

1. I've fixed the underline disappear/reappear issue, using classList.toggle ;
2. I've shortened the .js quite a lot;
3. I've added a cosmetic change to the CSS, using pointer:
4. I've removed the inline .js events from the HTMLand made the .js unobtrusive

Please ask questions in the comments below if there is anything that doesn't immediately seem clear to you.

 var gridView = document.getElementById("grid_view"); var listView = document.getElementById("list_view"); function grid_view() { var cookingResult = document.getElementById("cooking_result"); var gridView = document.getElementById("grid_view"); var listView = document.getElementById("list_view"); if (cookingResult.className === "recipes list") { cookingResult.className = "recipes grid"; gridView.classList.toggle('active'); listView.classList.toggle('active'); } } function list_view() { var cookingResult = document.getElementById("cooking_result"); var gridView = document.getElementById("grid_view"); var listView = document.getElementById("list_view"); if (cookingResult.className === "recipes grid") { cookingResult.className = "recipes list"; gridView.classList.toggle('active'); listView.classList.toggle('active'); } } gridView.addEventListener('click',grid_view,false); listView.addEventListener('click',list_view,false); 

 .active { text-decoration: underline; } .recipes.grid li { float: left; width: 50%; height: 50px; background: red; } .recipes.list li { float: left; width: 100%; height: 50px; background: red; } .recipes li:nth-of-type(2) { background: blue; } #grid_view, #list_view { cursor: pointer; } #grid_view.active, #list_view.active { cursor: text; } 

 <i id="grid_view" class="fa fa-th-large ml-5 active">Grid</i> <i id="list_view" class="fa fa-th-list ml-5">List</i> <ul id="cooking_result" class="recipes grid"> <li></li> <li></li> </ul>