在 jQuery 中使用 If/Else 语句答案

【问题标题】：Using If/Else statement in jQuery在 jQuery 中使用 If/Else 语句
【发布时间】：2015-02-26 06:43:23
【问题描述】：

我正在使用导航过滤器来突出显示在几个列表中的某些项目。单击每个导航按钮时，将在属于该类别的项目周围添加相应的边框。我在 jsFiddle 中有一个非常简化的代码版本。

//what do i do here?  if/else
$('li#all-btn').click(function() {
    $("#projects").find("li.wrap").toggleClass("highlight-all");
});

jsFiddle 并没有像我的原始代码那样突出显示所有这些（添加黑色边框），但我想将其更改为它将用各自的边框颜色突出显示每个项目的位置。我也喜欢打开和关闭边框的功能。

我认为实现这一点的最佳方法是在 jQuery 中使用 if/else 语句，例如 IF 项目包含此类，THEN toggleClass("respective class")。我怎样才能达到这个效果？

编辑：对不起，我可能没有说得足够清楚。因此，目标是在单击 all-btn 时，每个项目都将根据它们各自的颜色突出显示。就像现在一样，每个都将突出显示为黑色，但目标是显示所有颜色。例如，网页设计将以红色突出显示，图形设计以绿色突出显示，平面设计以蓝色突出显示，所有这些都通过单击全部按钮。

【问题讨论】：

api.jquery.com/hasclass。要注意的另一件事是您的 JS 已经在执行您所描述的操作。 $("#projects").find("li.wrap").toggleClass("highlight-all"); 将切换highlight-all 类，如果#projects 里面的li 有一个wrap 类。
我已经编辑了目标。目标是在单击全部时使它们全部突出显示，但每个都有自己的颜色，而不是黑色。
这将使用相同的 JS 处理，但添加到您的 CSS。我会为你做一个简单的例子。

标签： jquery css if-statement jquery-effects

【解决方案1】：

您在 CSS 的第 32 行有一个额外的 }。如果您删除该代码，该代码将起作用。

正如您在问题中提到的那样，您可能需要在.highlight-all 上添加一个black 边框。

.highlight-all {
    border: 3px solid black;
}

Fiddle.

【讨论】：

感谢您发现，粗心的错误。

【解决方案2】：

您的 CSS 中有一个额外的 }（第 32 行），它违反了紧随其后的第一个 CSS 规则。这就是为什么您的“全选”样式不起作用的原因。

【讨论】：

【解决方案3】：

你应该绑定所有li按钮并设置一个额外的数据来定义他需要定位的类别：

html:

<li class="default-btn" id="web-btn" data-target="web">WEB DESIGN</li>

js:

$(document).ready(function(){
    $('#nav-filter li').on('click', function() {
        var target = $(this).data('target');
        $('.'+target).toggleClass('highlight-'+target);
    });
});

我做了一些更正的 jsfiddle：http://jsfiddle.net/Pik_at/7LgLwx6c/4/

【讨论】：

【解决方案4】：

你的想法是对的，但是你想多了。 javascript 应该告诉 CSS 元素应该被突出显示，并且 CSS 应该控制颜色。

您应该为每个项目添加一个类，表明它是哪种类型的项目（我使用了type_1、type_2 和type_3）。当 highlight 类应用于项目项时，您的 CSS 将更改边框颜色。

JS：

$('#all-btn').click( function(e) {
    // Prevent the Default Click Action
    e.preventDefault();

    $('#projects').find('li.project').toggleClass('highlight');
});

HTML：

<a href="javascript:void(0);" id="all-btn">Toggle All</a>
<ul id="projects">
    <li class="project type_1">Project</li>
    <li class="project type_2">Project</li>
    <li class="project type_3">Project</li>
    <li class="project type_1">Project</li>
    <li class="project type_2">Project</li>
    <li class="project type_3">Project</li>
    <li class="project type_1">Project</li>
</ul>

CSS：

.project {
    /* Define a default border to avoid stuff shifting */
    border: 2px solid transparent;
}
.type_1.highlight {
    border-color:red;
}
.type_2.highlight {
    border-color:blue;
}
.type_3.highlight {
    border-color:green;
}

这是一个小提琴：

http://jsfiddle.net/nnds079o/

【讨论】：