Question

我正在使用导航过滤器来突出显示在几个列表中表示的某些项目。单击每个导航按钮时，将在属于该类别的项目周围添加相应的边框。我在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项目包含此类，然后是toggleClass（＆＃34;各自的类＆＃34;）。我怎样才能达到这个效果？

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

Answer 1

CSS中第32行有一个额外的}。如果删除它，代码就可以工作。

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

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

Fiddle

Answer 2

你的CSS中还有一个}（第32行），它会在它之后打破第一个CSS规则。这就是为什么你的“全选”风格不起作用的原因。

Answer 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/

Answer 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/

在jQuery中使用If / Else语句

4 个答案: