Javascript 切换列表和网格视图

我使用jQuery创建了一个简单的切换列表/网格视图。我的问题是如何使这段代码，即jQuery更高效（更好的编码）？下面是一些基于我在项目中的代码的伪代码：

HTML:

列表视图
网格视图

列表块
列表块
列表块
列表块
列表块
列表块
列表块
列表块

CSS:

。切换视图span{
颜色：#00804e；
光标：指针；
}
.切换视图。l-活动{
颜色：#c4c3c1；
光标：自动；
}
.列表视图李{
宽度：100%
}
.grid view li{
浮动：左；
宽度：50%；
}

jQuery：

$（'.toggle view span'）。在（'click'，function（）上{
if（$（this）.hasClass（'grid'））{
$（'列表视图'）.addClass（'网格视图'）；
$（'.toggle view span'）.addClass（'l-active'）；
$（'.toggle视图span.list'）.removeClass（'l-active'）；
}else if（$（this）.hasClass（'list'））{
$（“#列表视图”）.removeClass（'grid-view'）；
$（'.toggle view span'）.addClass（'l-active'）；
$（'.toggle view span.grid'）.removeClass（'l-active'）；
}
});

请参见此

$（'.toggle view span'）。在（'click'，function（）上{
if（$（this）.hasClass（'grid'））{
$（'列表视图'）.addClass（'网格视图'）；
$（'.toggle view.list'）.removeClass（'l-active'）；
}否则{
$（“#列表视图”）.removeClass（'grid-view'）；
$（'.toggle view.grid'）.removeClass（'l-active'）；
}
$（this.addClass（'l-active'）；
});

您好。

看到这个

$（'.toggle view span'）。在（'click'，function（）上{
if（$（this）.hasClass（'grid'））{
$（'列表视图'）.addClass（'网格视图'）；
$（'.toggle view.list'）.removeClass（'l-active'）；
}否则{
$（“#列表视图”）.removeClass（'grid-view'）；
$（'.toggle view.grid'）.removeClass（'l-active'）；
}
$（this.addClass（'l-active'）；
});

---

问候。

你所说的优雅是什么意思？请看我的作品介绍，我已经修改了它。它现在的样子很好。除了删除每个

if

语句中的重复代码行之外，我看不出您能做什么，但是您需要更多的代码来处理它。或者，使用2个单击事件处理程序，但同样不需要。好的，谢谢，我想我可以做的一件事是为重复调用相同的html元素创建变量，例如：。切换视图范围？？您可以做，但我真的不认为这会有多大区别，因为你仍然需要进行第二次查找以获得列表或网格类跨度。你说的优雅是什么意思？请看我的操作介绍，我已经修改了它。它的方式很好。除了删除每个

if

语句中的重复代码行之外，我看不出您能做什么，但是您需要更多的代码来处理它。或者，使用2个click事件处理程序，但同样不需要。好的，谢谢，我想我可以做的一件事是为重复调用相同的html元素创建变量，例如：.toggle view span？？你可以做，但我真的认为这不会有多大区别，因为你仍然需要进行第二次查找来获得列表或网格类的跨度。