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 m-l-5") {
        document.getElementById("grid_view").className = "fa fa-th-large m-l-5 active";

    }
}
function grid_view_inactive() {
    if (document.getElementById("grid_view").className == "fa fa-th-large m-l-5 active") {
        document.getElementById("grid_view").className = "fa fa-th-large m-l-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 m-l-5") {
        document.getElementById("list_view").className = "fa fa-th-list m-l-5 active";

    }
}
function list_view_inactive() {
    if (document.getElementById("list_view").className == "fa fa-th-list m-l-5 active") {
        document.getElementById("list_view").className = "fa fa-th-list m-l-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 m-l-5">Grid</i>
<i id="list_view" onclick="list_view();" class="fa fa-th-list m-l-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 修复了下划线消失/重新出现的问题；
2. 我已经大大缩短了 .js；
3. 我使用 pointer: 对 CSS 添加了外观更改
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 m-l-5 active">Grid</i>
<i id="list_view" class="fa fa-th-list m-l-5">List</i>
<ul id="cooking_result" class="recipes grid">
<li></li>
<li></li>
</ul>