Jquery's Conditional Statements: If/Else

Question

Jquery's Conditional Statements: If/Else

I am working on a navigation filter that highlights projects based on their respective categories when clicked. I want to make it so that when the #all-btn is clicked, all items are highlighted in their designated colors. Currently, they are set to highlight in black, but I would like to change this to:

Graphic design - green
Web design - red
Flat design - blue

I believe using an if/then statement in jQuery could accomplish this, but I'm unsure of how to implement it. For example:

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 the best approach to achieve this and will this code work effectively?

jquery css if-statement frontend

Answer 1

Answer №1

If you want to add custom attributes to your tab elements, consider using data-* attributes such as 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>

You can then simplify your jQuery code like this:

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

To make it even simpler, adjust your CSS accordingly:

Check out the updated version here

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

Answer 2

If you want to add custom attributes to your tab elements, consider using data-* attributes such as 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>

You can then simplify your jQuery code like this:

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

To make it even simpler, adjust your CSS accordingly:

Check out the updated version here

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

Answer 3

Answer №2

To perform the action, follow these steps:

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

See a demonstration here: Fiddle

If you simply want to toggle the class, use this code:

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

Check out the demo here: Fiddle

Answer 4

To perform the action, follow these steps:

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

See a demonstration here: Fiddle

If you simply want to toggle the class, use this code:

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

Check out the demo here: Fiddle

Answer 5

Answer №3

To check if an element has a certain class using jQuery, you can utilize the hasClass() method. Here is an example:

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 made some changes to your code in this updated fiddle. I removed console logging that was just for illustration purposes:

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

Check out the documentation here

Answer 6

To check if an element has a certain class using jQuery, you can utilize the hasClass() method. Here is an example:

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 made some changes to your code in this updated fiddle. I removed console logging that was just for illustration purposes:

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

Check out the documentation here

Answer 7

Answer №4

Consider utilizing jQuery's hasClass() method:

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

OR

An alternative approach is to use toggleClass():

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

In this scenario, the highlight-graphic class will be added if the item contains the class graphic, otherwise it will be removed.

Answer 8

Consider utilizing jQuery's hasClass() method:

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

OR

An alternative approach is to use toggleClass():

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

In this scenario, the highlight-graphic class will be added if the item contains the class graphic, otherwise it will be removed.

Answer 9

Answer №5

While jQuery can be used, achieving the same result is actually much simpler with just CSS.

$(".graphic, .web, .flat").toggleClass("highlight");

.graphic, .web, .flat {
  color: white;
 }

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

Answer 10

While jQuery can be used, achieving the same result is actually much simpler with just CSS.

$(".graphic, .web, .flat").toggleClass("highlight");

.graphic, .web, .flat {
  color: white;
 }

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

Answer 11

Answer №6

To streamline your code, try eliminating all if else statements and utilize the following snippet:

The currentClass variable may correspond to options like graphic, web, or list.

Revise the function as follows to dynamically change classes: $(document).find("li." + currentClass).toggleClass("highlight-" + currentClass);

Answer 12

To streamline your code, try eliminating all if else statements and utilize the following snippet:

The currentClass variable may correspond to options like graphic, web, or list.

Revise the function as follows to dynamically change classes: $(document).find("li." + currentClass).toggleClass("highlight-" + currentClass);

Jquery's Conditional Statements: If/Else

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

"Stay up-to-date effortlessly with the latest information on ext.data.store through automatic

How to utilize Jquery to return two variables into separate div elements from a single php file

Designing a layout for a chat application that is structured from the bottom up

Is there a way to display two words side by side in React components?

Issues with Pagination in a Dynamic Grid System when using Bootstrap DataTables

Adjust the width of a div element to match its content when nested within another div element

Color Coding Groups Using Google Charts

MailChimp's Ajax form submission fails to successfully add new subscribers to the mailing list

How can you create an accordion menu that expands when a button is clicked?

Can Keyboarddatepicker automatically format the date?

Ensure that the collapsing toggler and the textbox are aligned on the same line

Managing the scrolling direction horizontally with waypoints.js

Displaying a Bxslider inside a modal window

Low-quality CSS Gradient Design

jquery tutorial: toggling attributes

Utilizing AJAX to submit a combination of text fields and files in an HTML form

Angular - custom font styles for ui grid

Menu bar placed atop a carousel

I aim to customize the options of a dropdown list based on the selection of another dropdown

A way to verify a datalist field using jQuery validator within a PHP environment