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> 

我可以將class =“ active”添加到i標簽，但是單擊其他i標簽時無法刪除。 你能幫我解決嗎？ 另外，如果可能，您可以簡化為javascript嗎？ 我認為此功能太長了：)

Answer 1

這是一個整理好的解決方案。

我所做的主要更改：

1. 我使用classList.toggle解決了underline消失/重新出現的問題；
2. 我已經大大縮短了.js 。
3. 我已經使用指針對CSS添加了外觀上的更改pointer:
4. 我已經從HTML中刪除了內聯.js事件，並使該.js不引人注目

如果您有任何不清楚的地方，請在下面的評論中提問。

 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>