Jquery中的if / else语句

dcook

JSFiddle

我有一个导航过滤器,单击该导航过滤器时,将根据它们所属的类别来突出显示每个项目。我希望在单击#all-btn时,所有项目都将突出显示其各自的颜色。现在,它们将设置为突出显示黑色,但我想对此进行更改。例如,

平面设计将为绿色,网页设计将为红色,平面设计将为蓝色。

我认为jQuery中的if / then语句可以实现此目的,但不确定如何进行构架。IE

if (the item has class graphic) { 
    $("#projects").find("li.graphic").toggleClass("highlight-graphic");
} 
else if (item has class web) {
    $("#projects").find("li.web").toggleClass("highlight-web");
} 
else {
    $("#projects").find("li.flat").toggleClass("highlight-flat");
}

什么是设置此功能的好方法,这项功能会起作用吗?

乔什·克罗泽(Josh Crozier)

您可以为选项卡元素提供自定义data-*属性。在这种情况下,data-target属性。

<ul>
    <li class="default-btn" data-target="wrap" id="all-btn">All</li>
    <li class="default-btn" data-target="web" id="web-btn">WEB DESIGN</li>
    <li class="default-btn" data-target="graphic" id="graphic-btn">GRAPHIC DESIGN</li>
    <li class="default-btn" data-target="flat" id="flat-btn">FLAT DESIGN</li>
</ul>

然后,您可以将所有jQuery简化为以下内容:

$('li.default-btn').on('click', function () {
    $('#projects').find('.wrap.' + this.dataset.target).toggleClass('selected');
});

由于您仅切换selected类,因此还可以将CSS简化为以下内容:

在这里更新

.web.selected {
    border: 3px solid red;
}
.graphic.selected {
    border: 3px solid green;
}
.flat.selected {
    border: 3px solid blue;
}

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章