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

您可以为标签元素提供自定义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的所有简化为以下内容：

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

Answer 2

您可以使用jQuery＆＃39; 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 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);
});

演示：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

Answer 4

尝试使用jQuery hasClass（）：

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

OR

您可以简单地与toggleClass（）结合使用：

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

此处，如果项目包含课程highlight-graphic，则会应用graphic课程，否则highlight-graphic课程将被删除

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）{$（＆＃34; #test＆＃34;）。find（＆＃34; li。＆＃34; + currentClass）.toggleClass（＆＃34; highlight - ＆＃34; + currentClass）; }

在Jquery中的/ Else语句

6 个答案: