CODEWITHSUNDEEP
jquerycssif-statementfrontend
dcook
dcook

Reputation: 343

If/Else statement in Jquery

JSFiddle

I have a navigation filter that when clicked, each project will be highlighted depending on what category they are under. I would like that when clicking the #all-btn, all the items will be highlighted their respective color. Right now, they are set to highlight black, but I would like to change that. For example,

Graphic design will be green, Web design will be red, Flat design will be blue.

I would think that an if/then statement in the jQuery could achieve this but not sure how to frame it up. I.E.

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");
}

What would be a good way to set this up, and would this work?

Upvotes: 2

Views: 112

Answers (6)

blurfus
blurfus

Reputation: 14031

You can use jQuery's hasClass(). Something along the lines of: 

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;
}

UPDATE

I updated your fiddle to this (remove console logging, left in there for illustration purposes only):

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

Upvotes: 2

Josh Crozier
Josh Crozier

Reputation: 240878

You could give your tab elements custom data-* attributes. In this case, data-target attributes.

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

Then you can simplify all of your jQuery to the following:

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

Since you're only toggling a selected class, you can also simplify your CSS to the following:

Updated Here

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

Upvotes: 3

ranger
ranger

Reputation: 11

You can remove all if else and can use below code.

currentClass could be graphic/web/list

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

Upvotes: 0

Will Reese
Will Reese

Reputation: 2841

Using jQuery is ok, but you can accomplish this much more easily just by using css

$(".graphic, .web, .flat").toggleClass("highlight");
.graphic, .web, .flat {
  color: white;
 }

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

Upvotes: 1

Arun P Johny
Arun P Johny

Reputation: 388316

You can 

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

Demo: Fiddle

If you just want to toggle the 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");
});

Demo: Fiddle

Upvotes: 2

user2575725
user2575725

Reputation:

Try using jQuery hasClass():

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

OR

You could simply combine with toggleClass():

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

Here, highlight-graphic class will be applied if the item has class graphic else highlight-graphic class will be removed

Upvotes: 1

Related Questions