If/Else Jquery 中的语句

Question

我有一个导航过滤器，单击它时，每个项目都会根据它们所属的类别突出显示。我希望在单击 #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

您可以使用 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;
}

更新

我更新了您的 fiddle to this（删除控制台日志记录，保留在那里仅供说明）：

$(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 );
            }
        });
    });
});

See docs

Answer 2

你可以

$('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);
});

演示：Fiddle

如果您只想切换 class

$('#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");
});

演示：Fiddle

Answer 3

尝试使用 jQuery hasClass():

if ($('#item').hasClass('graphic')) { 
  $("#projects").find("li.graphic").toggleClass("highlight-graphic");
}

或

您可以简单地结合 toggleClass():

$("#projects").find("li.graphic").toggleClass("highlight-graphic", $('#item').hasClass('graphic'));

这里，如果项目有class graphic，highlight-graphic class 将被应用，否则highlight-graphic class 将被删除

Answer 4

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

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

由于您只切换 selected class，您还可以将 CSS 简化为以下内容：

Updated Here

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

Answer 5

使用 jQuery 没问题，但您只需使用 css

就可以更轻松地完成此操作

$(".graphic, .web, .flat").toggleClass("highlight");

.graphic, .web, .flat {
  color: white;
 }

.graphic.highlight {
  color: red;
}
.web.highlight {
  color: green;
}
.flat.highlight {
  color: blue;
}

Answer 6

您可以删除所有 if else 并可以使用以下代码。

currentClass 可以是 graphic/web/list

function changeTheClass(currentClass) { $("#test").find("li."+currentClass).toggleClass("highlight-"+currentClass); }

If/Else Jquery 中的语句

If/Else statement in Jquery

jquery

css

if-statement

frontend