jquery - Jquery 中的 If/Else 语句

Question

JSFiddle

我有一个导航过滤器，单击该过滤器时，每个元素都会根据它们所属的类别突出显示。我希望当单击#all-btn 时，所有元素都将突出显示各自的颜色。现在，它们设置为突出显示黑色，但我想更改它。例如，

平面设计将是绿色的，网页设计将是红色的，扁平化设计将是蓝色的。

我认为 jQuery 中的 if/then 语句可以实现这一点，但不确定如何构建它。即:

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

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

Answer 1

您可以为选项卡元素提供自定义 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 简化为以下内容:

Updated Here

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