Jquery中的if/else语句答案

【问题标题】：If/Else statement in JqueryJquery中的if/else语句
【发布时间】：2015-02-25 00:48:12
【问题描述】：

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

什么是设置它的好方法，这会起作用吗？

【问题讨论】：

标签： jquery css if-statement frontend

【解决方案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 的 all 简化为以下内容：

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

【讨论】：

谢谢！这似乎是最好最有效的方法，并且只需很少的代码即可完美运行。

【解决方案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

如果你只是想切换类

$('#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

【讨论】：

【解决方案3】：

你可以使用 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

【讨论】：

【解决方案4】：

尝试使用 jQuery hasClass()：

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

或

您可以简单地与 toggleClass() 结合使用：

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

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

【讨论】：

【解决方案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;
}

【讨论】：

【解决方案6】：

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

currentClass 可以是图形/网络/列表

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

【讨论】：