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

Question

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

我可以添加class =＆＃34; active＆＃34;我标记但是当我点击其他i标签时我无法删除。你可以帮我解决一下吗？ 另外，如果可能的话，你可以简化为javascript吗？我认为这个功能太长了：）

Answer 1

这是一个整理的解决方案。

我做出的主要改变：

1. 我使用underline修复了classList.toggle消失/重新出现的问题;
2. 我已经非常缩短了.js;
3. 我使用pointer:
为CSS添加了外观修改
4. 我已从HTML中移除了内联.js事件，并使.js不引人注目

如果有任何事情不能立即让您清楚，请在下面的评论中提问。

＆＃13;
＆＃13;
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);
＆＃13;
.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;
}
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;