Jquery中的If/Else语句

Question

JSFiddle

我有一个导航过滤器，当点击时，每个项目将被高亮显示，这取决于它们在哪个类别下。我想当点击#所有-btn时，所有的项目将被高亮显示各自的颜色。现在，他们将突出黑色，但我想改变这一点。例如,

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

我认为jQuery中的if/ this语句可以实现这一点，但不确定如何将其框架化。也就是。

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>

然后，您可以将all of您的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;
}

Answer 2

您可以使用jQuery的hasClass()。与…有关的东西：

var projElement = $("#projects li");

if ( projElement.hasClass('graphic') ) { 
    projElement.toggleClass("highlight-graphic");
} 
else if (projElement.hasClass('web') ) {
    projElement.toggleClass("highlight-web");
} 
else if (projElement.hasClass('flat') ) {
    projElement.toggleClass("highlight-flat");
} 
else {
    // do nothing;
}

更新

我更新了您的摆弄这事 (删除控制台日志记录，仅供说明之用)：

$(document).ready(function () {
    $('#nav-filter li').on('click', function () {
        var clickedOn = $(this).attr('id');
        console.log( 'clicked on: ' + clickedOn ) ;

        $("#projects li").each(function (index, value) {
            if (clickedOn === 'all' ){
                $(value).toggleClass("highlight-" + clickedOn );

            }else if ($(value).hasClass( clickedOn )) {
                $(value).toggleClass("highlight-" + clickedOn );
            }
        });
    });
});

见文档

Answer 3

你可以的

$('li#all-btn').click(function () {
    var toggle = $('#projects .wrap').not('.highlight-web, .highlight-graphic, .highlight-flat').length > 0;
    $("#projects").find("li.web").toggleClass("highlight-web", toggle);
    $("#projects").find("li.graphic").toggleClass("highlight-graphic", toggle);
    $("#projects").find("li.flat").toggleClass("highlight-flat", toggle);
});

演示：小提琴

如果你只想切换这个类

$('#all-btn').click(function () {
    $("#projects").find("li.web").toggleClass("highlight-web");
    $("#projects").find("li.graphic").toggleClass("highlight-graphic");
    $("#projects").find("li.flat").toggleClass("highlight-flat");
});

演示：小提琴